Lets Draw
Next ❯Canvas Coordinates
You must required a canvas element to draw your 2d graphics in it
<canvas width="100" height="100"></canvas>- The width attribute set to 300, and the height attribute set to 150 by default, if not declared
Let's Start
Example - To draw simple line
<canvas id="canvas" width="200" height="100" style="border:1px solid teal;"></canvas>
<script>
/*Must access your canvas element where you draw*/
var canvas = document.getElementById("canvas");
/* Create a canvas 2D context object */
var ctx = canvas.getContext("2d");
/* Now we code to draw on canvas */
ctx.moveTo(20,50);
ctx.lineTo(180,50);
ctx.stroke();
</script>OUTPUT:
- Canvas 2D context object provides pre-defined methods & properties used to draw 2d graphics
❮ Prev Getting Started
Next ❯Canvas Coordinates
So,