Home > HTML5, Web > HTML5: Canvas tag and Canvas API

HTML5: Canvas tag and Canvas API

The new <canvas> element in HTML5 lets you draw within the browser. It has it’s own set of specifications.

<canvas id=”myCanvas” width=”600″ height =” 300″> Your browser does not support canvas. Please upgrade your browser </canvas>

  • id: allows scripts to identify which canvas to draw on
  • width & height: how big to make canvas
  • text within tags: fall back content. Dont’ use as alt tag. don’t use as accessibility content.

To draw in the canvas, use the Canvas 2D API as part of a javascript function

  • beginPath()
  • moveTo(): Moves to a specified point on the canvas
  • lineTo(): Defines a line from the previous point
  • stroke(): Draws the line and stroke
  • closePath()
  • drawImage()
  • beginPath(x coordinate, y coordinate),
  • fillRect(),
  • fillStyle()
  • lineWidth=4 ;
    • lines are drawn with the path at the center. half of the width will fall one either side, so try to use an even number
  • lineJoin=”round”;
    • Round, bevel or miter are the options
  • strokeStyle=”#CCCCCC”;
  • can be used to animate, re-size, move…etc
  • Write as part of a javascript function.
Advertisements
Categories: HTML5, Web Tags: ,
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: