HTML5 canvas

In thid post you can find some usefull code snipets on HTML5 Canvas.
You may need to include the following javascript files into your main HTML page:

• Modernizr.js which is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser.
• jQuery.js which is Javascript library for rapid web development that simplifies many things like event handling, document traversing, etc.

First, check if the Canvas is supported in the browser:

if (!Modernizr.canvas) {
  return
} else {
  // do something
}

Declare the canvas in HTML

<canvas id="canvas" width="500" height="500">Your browser does not support HTML5</canvas>

Get the canvas element in Javascript

canvas = document.getElementById("canvas");

Get a drawing area for 2D arts

context = canvas.getContext("2d");

Draw a rectangle (only the border)

context.strokeStyle = "#000000";
context.strokeRect(0, 0, canvas.width, canvas.height);

Draw a circle filled in black

context.fillStyle = color;
context.arc(centerX,centerY,radius,0,2*Math.PI);
context.fill();

Type text on a given position x, y

context.fillStyle = color;
context.font = '30px_sans';
context.textBaseline = 'top';
context.fillText ("This is a text", x, y);

Draw a line from x1,y1 to x2,y2

context.beginPath();
context.moveTo(x1, y1);
context.lineTo(x2, y2);
context.stroke(); 

Listen for mouse events (down, move, up) on a Canvas element:

canvas.addEventListener('mousedown', mouseEventHandler, false);
canvas.addEventListener('mousemove', mouseEventHandler, false);
canvas.addEventListener('mouseup',   mouseEventHandler, false);

function mouseEventHandler(event) {
  if (event.type == "mousedown") {
     // Mouse Down
  } else if (event.type == "mousemove") {
     // Mouse Move
  } else if (event.type == "mouseup") {
     // Mouse Up
  }
}

Get the mouse coordinates x, y on the canvas.

// returns the coordinates (x, y) of a mouse after click event
function mouseCoordinates(event) {
  var x, y;
  // Get the mouse position relative to the canvas element
  if(event.layerX || event.layerX == 0) { //Firefox
    x = event.layerX;
    y = event.layerY;
  } else if (event.offsetX || event.offsetX == 0) { //Opera
    x = event.offsetX;
    y = event.offsetY;
  }
  return {x:x, y:y};
}

Here is sample project of HTML5-based paint that combine the different things exposed earlier: index.html, webpaint.js.

References

• Drawing different forms with HTML5 Canvas.
• HTML5 Canvas line color.
• Hot to draw with HTML5 Canva.
• Create HTML5 Canvas Javascript Drawing app.
• HTML5 Canvas painting.