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

  • Canvas Coordinates
❮ Prev Getting Started
Next ❯Canvas Coordinates
receipt