Coordinates

Next ❯Canvas Drawing

You must required a canvas element to draw your 2d graphics in it

<canvas width="100" height="100"></canvas>
  • Canvas element provides an area of coordinate points on which we draw using those points, Normally 1 coordinate point unit is equals to 1 pixel on the canvas
  • The width attribute set to 300, and the height attribute set to 150 by default, if not declared


Diff. between width/height attribute & property in canvas

Well, It's not recommended to use width/height property in canvas element
by default value you set to width/height attribute, are set to the value of width/height property

  • Note! The canvas coordinate works only on the width & height attribute values, but property values do affect

At x-axis
    width attribute defines total number of coordinate points
    1 point unit = (width property/width attribute) px
At y-axis
    height attribute defines total number of coordinate points
    1 point unit = (height property/height attribute) px

Example
/* Canvas used below */
<canvas width="200" height="100" style="height:100px;border:1px solid teal;"></canvas>

Check for the coordinate position

width attribute

width property

width property : 200px
width attribute : 200Points
1 point unit : 1px

  • Canvas Drawing
❮ Prev Lets Draw
Next ❯Canvas Drawing
TryOut Examples"Learn to Explore..!"

TryOut Editor

receipt
❯