HTML5 Canvas Tag

HTML5 <canvas> tag helps to draw image, text, oval, rectangle etc.

  • <canvas> tag is usually a container in which draw any shape using script like javascript.
  • <canvas> is the rectangular area on the web page.
  • By default canvas has no border and not visible before draw shape.
  • You have script as a paint brush to draw shape and make it visible.
Syntax :
<canvas id="Canvas1" width="100" height="100"
 style="border:solid 1px #000000">
</canvas>
Output :

HTML5 <canvas> Shapes

  • Rectangle
    • Methods
    1. clearRect(x, y, width,height) :This method clear Rectangle at the particular range
    2. fillRect(x, y, width,height) : This method fill the rectangle.
    3. strokeRect(x, y, width,height) :This method create a rectangular outline.

    Example

  • Paths
    • Methods
    1. arc(x, y, radius, startAngle, endAngle, anticlockwise) :This method draw an arc.
    2. beginPath() :This method reset the Path.
    3. closePath() :This method close the current subpath and start a new subpath.
    4. fill() :This method fill the subpath.
    5. moveTo(x,y) :This method make a new subpath at given point.
    6. stroke(x,y) :This method stroke the subpath with given style.

    Example

  • Image
    • Methods
    1. beginPath() :This method reset the Path.
    2. closePath() :This method close the current subpath and start a new subpath.
    3. drawImage(img,x,y):This method draw an image.
    4. fill() :This method fill the subpath.
    5. moveTo(x,y) :This method make a new subpath at given point.
    6. stroke(x,y) :This method stroke the subpath with given style.

    Example

  • Text & Fonts
    • Methods
    1. fillText(text, x, y[,maxWidth]) :This method fill the Text.
    2. font[=value] :This method give current font setting to be change.
    3. strokeText(text, x, y[,maxWidth] ) :This method stroke the given Text.
    4. textAlign[=value] :This method set the alignment of the Text as Start,End,Left,Right and Center.
    5. textBaseline [ = value ] :This method give the baseline alignment as alphabetic, bottom, hanging, ideographic, middle and top.

    Example