HTML 5 CANVAS - DRAWING REFERENCES www.santiago.bz
Copy this code and paste into any text editor, save as yourcanvas.html


<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ











////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ

};

</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>

CANVAS

constant properties

canvas.width and canvas.height ( from <canvas id="myCanvas" width="800" height="600"></canvas> )

declaration of variables

var x = 10;
var y = 10;

Repeat loops example

for (var i=0; i<canvas.height; i+=20) {

context.beginPath();

context.lineWidth = i/20;

context.strokeStyle = "rgb("+i+",0,0)";

context.moveTo(0, 0);

context.lineTo(canvas.width, i);

context.stroke();

}



LINE

Simple line

context.beginPath();
context.lineWidth = 10; // declare the width in pixels of the line
context.moveTo(x1,y1); // move to starting coordinates
context.lineTo(x2,y2); // draw line to following point coordinates
context.lineTo(x3,y3); // draw line to following point coordinates
context.lineTo(xN,yN); // draw line to following point coordinates
context.strokeStyle = "rgb(255,0,0)"; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.stroke();

Line Caps

context.lineCap = "butt"; // "round" or "square"


Line Joins

context.lineJoin = "miter"; // "round" or "bevel"


RECTANGLE

context.rect(x, y, width, height); // top left corner x and y coordinates, width and height

// for a square width = height , the width and the height have the same value



ARC and CIRCLE

Arc

// x and y coordinates of the tracing circle

var circlecenterX = canvas.width / 2; // x coordinate
var circlecenterY = canvas.height / 2; // y coordinate

// radius of the tracing circle

var radius = 100;

// Math.PI is HALF the circle, 2*Math.PI is the full circle
// use a number between 0 and 2 to declare the starting and ending angle

var startAngle = 1.1 * Math.PI;
var endAngle = 1.9 * Math.PI;

// draw the arc clockwise or counterclockwise

var counterClockwise = false; // if set to true it draws the complimentary arc

// draw the arc

context.arc(circlecenterX, circlecenterY, radius, startAngle, endAngle, counterClockwise);


Full circle

// x and y coordinates of the circle

var circlecenterX = canvas.width / 2; // x coordinate
var circlecenterY = canvas.height / 2; // y coordinate

// radius of the circle

var radius = 100;

// Math.PI is HALF the circle, 2*Math.PI is the full circle
// use a number between 0 and 2 to declare the starting and ending angle

var startAngle = 0; // start at the angle 0
var endAngle = 2 * Math.PI; // end at the full angle

// draw the arc clockwise or counterclockwise

var counterClockwise = false; // in this case it doesn't really matter unless you are drawing half a circle

// draw the arc

context.arc(circlecenterX, circlecenterY, radius, startAngle, endAngle, counterClockwise);




COLOR

Full Color

// You need a closed shape in order to fill with a full color

// define the filling color

context.fillStyle = 'rgb(255,25,129)'; // or '#FF0388'

// give the command to fill the SHAPE

context.fill();


Linear Gradient

// remember: create the shape first

// create the directional line for the gradient

var grd = context.createLinearGradient(startX, startY, endX, endY);

// starting color
// 0 is the proportional position of the starting color at coordinates startX startY

grd.addColorStop(0, "rgb(255,0,0)";

// the proportional position for each additional color
// is a number greater than 0 and smaller than 1

// in between color 1

grd.addColorStop(0.3, "rgb(0,255,0)";

// in between color 2

grd.addColorStop(0.5, "rgb(0,255,0)";

// in between color N
// 0 < N < 1

grd.addColorStop(N, "rgb(0,255,0)";

// ending color
// 1 is the proportional position of ending color at coordinates endX endY

grd.addColorStop(1, "rgb(0,0,255)";

context.fillStyle = grd;

context.fill();


Radial Gradient - example

// the radial gradient requires a shape, in this case a rectangle that fills the entire canvas
context.rect(0,0, canvas.width, canvas.height);

// inner circle
var circ1X = 10;
var circ1Y = 10;
var circ1Radius = 100;

// outer circle
var circ2X = 10;
var circ2Y = 10;
var circ2Radius = 200;

// create radial gradient
var grd = context.createRadialGradient(circ1X, circ1Y, circ1Radius, circ2X, circ2Y, circ2Radius);
// inner color
grd.addColorStop(0, "rgb(255,0,0)");

// you can add intermediate colors using N greater than 0 and smaller then 1
var N = 0.5;
grd.addColorStop(N, "rgb(0,0,255)");

// outer color
grd.addColorStop(1, "rgb(0,255,0)");

context.fillStyle = grd;
context.fill();


CURVES

Quadratic Curve example

// starting point coordinates
var startX = 0;
var startY = canvas.height/2;

// control point coordinates ( magnet )
var cpointX = canvas.width / 2;
var cpointY = canvas.height / 2 + 200;

// ending point coordinates
var endX = canvas.width;
var endY = canvas.height/2;


context.beginPath();
context.moveTo(startX, startY);
context.quadraticCurveTo(cpointX, cpointY, endX, endY);

context.lineWidth = 5;
context.strokeStyle = "rgb(0,0,255)";
context.stroke();





Bézier Curve example

// starting point coordinates
var startX = 0;
var startY = canvas.height/2;

// control point 1 coordinates ( magnet )
var cpointX1 = canvas.width / 4;
var cpointY1 = canvas.height / 2 + 200;

// control point 2 coordinates ( magnet )
var cpointX2 = canvas.width * 3/4;
var cpointY2 = canvas.height / 2 - 200;

// ending point coordinates
var endX = canvas.width;
var endY = canvas.height/2;


context.beginPath();
context.moveTo(startX, startY);
context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, endX, endY);

context.lineWidth = 5;
context.strokeStyle = "rgb(0,0,255)";
context.stroke();



// example with repeat loop



PATHS

Closed path example

context.beginPath();
context.moveTo(spointX, spointY);
context.quadraticCurveTo(canvas.width*1/5, canvas.height/5, epointX, epointY);
context.quadraticCurveTo(canvas.width*4/5, canvas.height/5, spointX, spointY);
context.closePath();
context.fillStyle = "rgb(0,255,0)";
context.fill();


EXPORT AS PNG

example

// ADD THIS CODE AFTER YOU HAVE FINISHED ALL YOUR SHAPES
var dataURL = canvas.toDataURL();
document.getElementById("myImage").src = dataURL;


// MODIFY THE body content AND ADD THE IMAGE WITH THE id = "myImage" INSIDE THE BODY

<body onmousedown="return false;">
<canvas id="myCanvas" width="400" height="200" style="display:none;"></canvas>
<img id="canvasImg" border="5" alt="Right click to save me!">
</body>