Css5 canvas

Canvas
<canvas id="tutorial" width=“300" height=“150">
Text for very old browsers
</canvas>
var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (10, 10, 55, 50);
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect (30, 30, 55, 50);

Rectangle
ctx.fillRect(25,25,100,100);
ctx.clearRect(45,45,60,60);
ctx.strokeRect(50,50,50,50);
Draw filled rectangle
Clear rectangle area
Draw rectangle

Drawing paths
beginPath() Creates a new path. Once created, future drawing commands are directed
into the path and used to build the path up.
closePath() Closes the path so that future drawing commands are once again directed
to the context.
stroke() Draws the shape by stroking its outline.
fill() Draws a solid shape by filling the path's content area. Fill doesn’t need closePath.
moveTo(x, y) Moves the pen to the coordinates specified by x and y.
lineTo(x, y) Draws a line from the current drawing position to the position specified by
x and y.
arc(x, y, radius, startAngle, endAngle, anticlockwise) Draws an arc.
quadraticCurveTo(cp1x, cp1y, x, y), bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) Draws a
or cubic Bézier curve from the current pen position to the end point specified by x and
y, using the control points specified by (cp1x, cp1y) and (cp2x, cp2y).

Drawing paths
// Filled triangle
ctx.beginPath();
ctx.moveTo(25,25);
ctx.lineTo(105,25);
ctx.lineTo(25,105);
ctx.fill();
// Stroked triangle
ctx.beginPath();
ctx.moveTo(125,125);
ctx.lineTo(125,45);
ctx.lineTo(45,125);
ctx.closePath();
ctx.stroke();
ctx.beginPath();
ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle
ctx.moveTo(110,75);
ctx.arc(75,75,35,0,Math.PI,false); // Mouth (clockwise)
ctx.moveTo(65,65);
ctx.arc(60,65,5,0,Math.PI*2,true); // Left eye
ctx.moveTo(95,65);
ctx.arc(90,65,5,0,Math.PI*2,true); // Right eye
ctx.stroke();

Drawing paths
// Quadratric curves example
ctx.beginPath();
ctx.moveTo(75,40);
ctx.bezierCurveTo(75,37,70,25,50,25);
ctx.bezierCurveTo(20,25,20,62.5,20,62.5);
ctx.bezierCurveTo(110,102,130,80,130,62.5);
ctx.bezierCurveTo(130,62.5,130,25,100,25);
ctx.fill();
ctx.beginPath();
ctx.moveTo(75,25);
ctx.quadraticCurveTo(25,25,25,62.5);
ctx.quadraticCurveTo(25,100,50,100);
ctx.quadraticCurveTo(125,100,125,62.5);
ctx.stroke();

Drawing images
The canvas API is able to use any of the following data types as an image source:
HTMLImageElement These are images created using the Image() constructor, as well as any
<img> element.
HTMLVideoElement Using an HTML <video> element as your image source grabs the
current frame from the video and uses it as an image.
HTMLCanvasElement You can use another <canvas> element as your image source.
var img = new Image(); // Create new img element
img.addEventListener("load",
function() {
// execute drawImage statements here
}, false
);
img.src = 'myImage.png'; // Set source path
var img_src =
'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUh
A+hkcuO4lmNVindo7qyrIXiGBYAOw==';

Drawing images
drawImage(image, x, y, width, height) Draws the CanvasImageSource specified
by the image parameter at the coordinates (x, y). Width and height is optional
parameters indicate the size to which to scale the image when drawing it onto
the canvas.
var img = new Image();
img.onload = function(){
ctx.drawImage(img,0,0);
ctx.beginPath();
ctx.moveTo(30,96);
ctx.lineTo(70,66);
ctx.lineTo(103,76);
ctx.lineTo(170,15);
ctx.stroke();
};
img.src = 'backdrop.png';

Slicing images
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) Given an
image, this function takes the area of the source image specified by the rectangle
whose top-left corner is (sx, sy) and whose width and height are sWidth and
sHeight and draws it into the canvas, placing it on the canvas at (dx, dy) and
scaling it to the size specified by dWidth and dHeight.

Colors
fillStyle = color Sets the style used when filling shapes.
strokeStyle = color Sets the style for shapes' outlines.
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
for (var i=0;i<6;i++){
for (var j=0;j<6;j++){
ctx.fillStyle = 'rgb(' + Math.floor(255-42.5*i) + ',' + Math.floor(255-42.5*j) + ',0)';
ctx.fillRect(j*25,i*25,25,25);
}
}
}

Colors
fillStyle = color Sets the style used when filling shapes.
strokeStyle = color Sets the style for shapes' outlines.
function draw() {
for (var i=0;i<6;i++){
for (var j=0;j<6;j++){
ctx.strokeStyle = 'rgb(0,' + Math.floor(255-42.5*i) + ',' + Math.floor(255-42.5*j) + ')';
ctx.beginPath();
ctx.arc(12.5+j*25,12.5+i*25,10,0,Math.PI*2,true);
ctx.stroke();
}
}
}

Transparency
globalAlpha = transparencyValue Applies the specified transparency value to all future
shapes drawn on the canvas. The value must be between 0.0 (fully transparent) to 1.0 (fully
opaque). This value is 1.0 (fully opaque) by default.
ctx.fillStyle = 'rgb(255,221,20, opacity)';
function draw() {
var ctx = document.getElementById('canvas').getContext('2d'); // draw background
ctx.fillStyle = '#FD0';
ctx.fillRect(0,0,75,75);
ctx.fillStyle = '#6C0';
ctx.fillStyle = '#09F';
ctx.fillStyle = '#F30';
ctx.fillStyle = '#FFF';
// set transparency value
ctx.globalAlpha = 0.2;
// Draw semi transparent circles
for (i=0;i<7;i++){
ctx.beginPath();
ctx.arc(75,75,10+10*i,0,Math.PI*2,true);
ctx.fill();
} }

Line styles
lineWidth = value Sets the widths of lines drawn in the future.
lineCap = type Sets the appearance of the ends of lines.
lineJoin = type Sets the apperance of the "corners" where lines meet.
miterLimit = value Establishes a limit on the miter when two lines join at a sharp angle, to
let you control how thick the junction becomes.
function draw() {
for (var i = 0; i < 10; i++){
ctx.lineWidth = 1+i;
ctx.beginPath();
ctx.moveTo(5+i*14,5);
ctx.lineTo(5+i*14,140);
ctx.stroke();
}
}

Line styles
lineCap
butt The ends of lines are squared off at the endpoints.
round The ends of lines are rounded.
square The ends of lines are squared off by adding a box with
an equal width and half the height of the line's thickness.
lineJoin
round Rounds off the corners of a shape by filling an additional
sector of disc centered at the common endpoint of connected
segments. The radius for these rounded corners is equal to the
line width.
bevel Fills an additional triangular area between the common
endpoint of connected segments, and the separate outside
rectangular corners of each segment.
miter Connected segments are joined by extending their
outside edges to connect at a single point, with the effect of
filling an additional lozenge-shaped area. This setting is effected
by the miterLimit property which is explained below.
miterLimit determines how far the outside connection point
can be placed from the inside connection point.

Gradients
createLinearGradient(x1, y1, x2, y2) Creates a linear gradient object with a starting point of (x1,
y1) and an end point of (x2, y2).
createRadialGradient(x1, y1, r1, x2, y2, r2) Creates a radial gradient. The parameters represent
two circles, one with its center at (x1, y1) and a radius of r1, and the other with its center at (x2,
y2) with a radius of r2.
We can then assign this object to the fillStyle or strokeStyle properties.
var lineargradient = ctx.createLinearGradient(0, 0, 150, 150);
var radialgradient = ctx.createRadialGradient(75, 75, 0, 75, 75, 100);
gradient.addColorStop(position, color) Creates a new color stop on the gradient object. The
position is a number between 0.0 and 1.0 and defines the relative position of the color in the
gradient, and the color argument must be a string representing a CSS <color>, indicating the
color the gradient should reach at that offset into the transition.

Gradients
function draw() {
// Create gradients
var lingrad = ctx.createLinearGradient(0,0,0,150);
lingrad.addColorStop(0, '#00ABEB');
lingrad.addColorStop(0.5, '#fff');
lingrad.addColorStop(0.5, '#26C000');
lingrad.addColorStop(1, '#fff');
var lingrad2 = ctx.createLinearGradient(0,50,0,95);
lingrad2.addColorStop(0.5, '#000');
lingrad2.addColorStop(1, 'rgba(0,0,0,0)');
// assign gradients to fill and stroke styles
ctx.fillStyle = lingrad;
ctx.strokeStyle = lingrad2;
// draw shapes
ctx.fillRect(10,10,130,130);
ctx.strokeRect(50,50,50,50);
}

Shadows
shadowOffsetX = float Indicates the horizontal distance the shadow should extend from the
object. This value isn't affected by the transformation matrix. The default is 0.
shadowOffsetY = float Indicates the vertical distance the shadow should extend from the object.
This value isn't affected by the transformation matrix. The default is 0.
shadowBlur = float Indicates the size of the blurring effect; this value doesn't correspond to a
number of pixels and is not affected by the current transformation matrix. The default value is 0.
shadowColor = <color> A standard CSS color value indicating the color of the shadow effect; by
default, it is fully-transparent black.
function draw() {
ctx.shadowOffsetX = 2;
ctx.shadowOffsetY = 2;
ctx.shadowBlur = 2;
ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
ctx.font = "20px Times New Roman";
ctx.fillStyle = "Black";
ctx.fillText("Sample String", 5, 30);
}

Text
context.fillText(text,x,y,maxWidth);
text Specifies the text that will be written on the canvas
x The x coordinate where to start painting the text (relative to the canvas)
y The y coordinate where to start painting the text (relative to the canvas)
maxWidth Optional. The maximum allowed width of the text, in pixels
ctx.font="20px Georgia";
ctx.fillText("Hello World!",10,50);
ctx.font="30px Verdana";
// Create gradient
var gradient=ctx.createLinearGradient(0,0,c.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// Fill with gradient
ctx.fillStyle=gradient;
ctx.fillText("Big smile!",10,90);

Text
ctx.fillStyle = "#00F";
ctx.strokeStyle = "#F00";
ctx.font = "italic 30pt Arial";
ctx.fillText("Fill text", 20, 50);
ctx.font = 'bold 30px sans-serif';
ctx.strokeText("Stroke text", 20, 100);
ctx.textBaseline = "bottom";
ctx.fillText("bottom", 400, 75);
Values - top, hanging, middle,
alphabetic, ideographic, bottom.
context.textAlign = "center";
context.fillText("center", 250, 20);
Values - center, start, end, left, right.

Save state
save() Saves the entire state of the canvas. (push in stack)
restore() Restores the most recently saved canvas state. (pop from stack)
function draw() {
ctx.fillRect(0,0,150,150); // Draw a rectangle with default settings
ctx.save(); // Save the default state
ctx.fillStyle = '#09F' // Make changes to the settings
ctx.fillRect(15,15,120,120); // Draw a rectangle with new settings
ctx.save(); // Save the current state
ctx.fillStyle = '#FFF' // Make changes to the settings
ctx.globalAlpha = 0.5;
ctx.fillRect(30,30,90,90); // Draw a rectangle with new settings
ctx.restore(); // Restore previous state
ctx.fillRect(45,45,60,60); // Draw a rectangle with restored settings
ctx.restore(); // Restore original state
ctx.fillRect(60,60,30,30); // Draw a rectangle with restored settings
}

Translating
translate(x, y) Moves the canvas and its origin on the grid. x indicates the horizontal distance to
move, and y indicates how far to move the grid vertically.
function draw() {
for (var i=0;i<3;i++) { for (var j=0;j<3;j++) {
ctx.save();
ctx.strokeStyle = "#9CFF00";
ctx.translate(50+j*100,50+i*100);
drawSpirograph(ctx,20*(j+2)/(j+1),-8*(i+3)/(i+1),10);
ctx.restore();
} }
}
function drawSpirograph(ctx,R,r,O){
var x1 = R-O, y1 = 0, i = 1;
ctx.beginPath();
ctx.moveTo(x1,y1);
do {
if (i>20000) break;
var x2 = (R+r)*Math.cos(i*Math.PI/72)-(r+O)*Math.cos(((R+r)/r)*(i*Math.PI/72));
var y2 = (R+r)*Math.sin(i*Math.PI/72) - (r+O)*Math.sin(((R+r)/r)*(i*Math.PI/72));
ctx.lineTo(x2,y2);
x1 = x2; y1 = y2; i++;
} while (x2 != R-O && y2 != 0 );
ctx.stroke();
}

Rotating
rotate(angle) Rotates the canvas clockwise around the current origin by the angle number of
radians.
function draw() {
ctx.translate(75,75);
for (var i=1;i<6;i++){ // Loop through rings (from inside to out)
ctx.save();
ctx.fillStyle = 'rgb('+(51*i)+','+(255-51*i)+',255)';
for (var j=0;j<i*6;j++){ // draw individual dots
ctx.rotate(Math.PI*2/(i*6));
ctx.beginPath();
ctx.arc(0,i*12.5,5,0,Math.PI*2,true);
ctx.fill();
}
ctx.restore();
}
}

Scaling
scale(x, y) Scales the canvas units by x horizontally and by y vertically. Both parameters are real
numbers. Values that are smaller than 1.0 reduce the unit size and values above 1.0 increase the
unit size. Values of 1.0 leave the units the same size.
ctx.save()
drawSpirograph(ctx,22,6,5);
ctx.scale(0.75,0.75);
ctx.translate(133.333,0);
ctx.scale(0.75,0.75);
ctx.restore();
ctx.strokeStyle = "#0cf";
ctx.save()
ctx.scale(1,0.75);
ctx.scale(1,0.75);
ctx.scale(1,0.75);
ctx.restore();

Transform
transform(m11, m12, m21, m22, dx, dy) This method must multiply the current transformation
matrix with the matrix described by:
HomeTask

Css5 canvas

Related slideshows

More Related Content

Css5 canvas