etc.
should be always the first line of HTML5.
element itself is accessible in DOM, but it's elements's are not accessible to DOM. cause it's work in immediate mode and not have its own objects.
No longer have to specify the script type in HTML5.
You can put text within canvas tags, so that it'll displayed if the browser does not support canvas.
Your browser does not support HTML5 canvas
And within javascript use function below to detect support:
function canvasSupport () {
return !!document.createElement('canvas').getContext;
//detect whether the canvas element exist and if it's context exist or null
}
function canvasApp() {
if (!canvasSupport) {
return;
}
}
Canvas
Basic Rectangle Shape
fillRect(x,y,width,height);
Filled rectangle with position [x,y] for width and height.
strokeRect(x,y,width,height);
Rectangle outline.
clearRectangle(x,y,width,height);
Clear the specified area.
Set up style before use:
context.fillstyle = 'red';
context.strokeStyle = 'black';
context.lineWidth = 2;
Canvas state
Canvas will store transformations, current clipping region and current values, and can be save and restored by:
context.save();
context.restore()
Using paths to create lines
beginPath(); // to start a path
beginPath(); closePath(); // subpath considered closed before outer
closePath(); // to end a path
eg:
context.strokeStyle = "black";
context.lineWidth = 10;
context.lineCap = 'square'; // end style of path
context.beginPath();
context.moveTo(20, 0);
context.lineTo(100, 0);
context.stroke(); // draw
context.closePath();
LineCap attributes
butt: defualt, a flat edge that is perpendicular to the end of the line.
round: semicicle edge.
square: rectangle edge.
lineJoin attributes
miter: edge is drawn at the join.
round: round edge drawn at the join.
Advanced path methods
1. arc()
context.arc(x, y, radius, startAngle, endAngle, anticlockwise);
x,y define the center of the circle, startAngle and endAngle are radians, anticlockwise define the direction in boolean value.
eg:
context.arc(100, 100, 20, (Math.PI/180)*0, (Math.PI/180)*360, false);
2. arcTo()
context.arcTo(x1, y1, x2, y2, radius);
Draw a arc from [x1, y1] to [x2, y2].
3. Bezier curves
context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y); // cubic mode
context.quadraticCurveTo(cpx, cpy, x, y); // quadratic
Compositing
Control over the transparency and the layering effects.
Default -> 1.0, range[0.0,1.0], must be set before a shape is drawn.
globalCompositeOperation:
How shapes are drawn.
Where they overlap, displays the source and not the destination.
Destination atop the source.
Destination in the source.
Destination out source.
Destination over the source.
Displays the sum of the source image and destination image.
Source atop the destination.
Source in the destination.
Source out destination.
(Default.) Source over destination.
Source xor destination.
eg:
//draw a big box on the screen
context.fillStyle = "black"; //
context.fillRect(10, 10, 200, 200);
//leave globalCompositeOperation as is
//now draw a red square
context.fillStyle = "red";
context.fillRect(1, 1, 50, 50);
//now set it to source-over
context.globalCompositeOperation = "source-over";
//draw a red square next to the other one
context.fillRect(60, 1, 50, 50); //now set to destination-atop
context.globalCompositeOperation = "destination-atop";
context.fillRect(1, 60, 50, 50);
//now set globalAlpha
context.globalAlpha = .5;
//now set to source-atop
context.globalCompositeOperation = "source-atop";
context.fillRect(60, 60, 50, 50);
globalCompositeOperation does not work properly any more
Simple canvas transformations
Nowadays mostly used transformations are scale and rotate:
context.setTransform(1,0,0,1,0,0); // transform matrix (according to the former)
var angleInRadians = 45 * Math.PI / 180;
context.rotate(angleInRadians); // use radians instead of degrees
context.translate(x,y); // reset the origin locations
