Canvas
paths
a list of points, connected by segments of lines that can be of different shapes, curved or not, of different width and of different color can be closed
font property
font = value The current text style being used when drawing text. This string uses the same syntax as the CSS font property. The default font is 10px sans-serif. textAlign = value Text alignment setting. Possible values: start, end, left, right or center. The default value is start. textBaseline = value Baseline alignment setting. Possible values: top, hanging, middle, alphabetic, ideographic, bottom. The default value is alphabetic. direction = value Directionality. Possible values: ltr, rtl, inherit. The default value is inherit.
patterns
repeat Tiles the image in both vertical and horizontal directions. repeat-x Tiles the image horizontally but not vertically. repeat-y Tiles the image vertically but not horizontally. no-repeat Doesn't tile the image. It's used only once.
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 half 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.
left upper corner
0,0
large example
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <script type="application/javascript"> function draw() { var canvas = document.getElementById('canvas'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); ctx.fillStyle = 'rgb(200, 0, 0)'; ctx.fillRect(10, 10, 50, 50); ctx.fillStyle = 'rgba(0, 0, 200, 0.5)'; ctx.fillRect(30, 30, 50, 50); } } </script> </head> <body onload="draw();"> <canvas id="canvas" width="150" height="150"></canvas> </body> </html>
example
<canvas id="stockGraph" width="150" height="150"> current stock price: $3.15 + 0.15 </canvas> <canvas id="clock" width="150" height="150"> <img src="images/clock.png" width="150" height="150" alt=""/> </canvas>
steps
beginPath() Creates a new path. Once created, future drawing commands are directed into the path and used to build the path up. Path methods Methods to set different paths for objects. 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.
lineCap
determines how the end points of every line are drawn. There are three possible values for this property and those are: butt, round and square. By default this property is set to butt. 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.
rectangle functions
fillRect(x, y, width, height) Draws a filled rectangle. strokeRect(x, y, width, height) Draws a rectangular outline. clearRect(x, y, width, height) Clears the specified rectangular area, making it fully transparent.
if we want to apply color to a shape
fillStyle = color Sets the style used when filling shapes. strokeStyle = color Sets the style for shapes' outlines
drawing a triangle
function draw() { var canvas = document.getElementById('canvas'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.moveTo(75, 50); ctx.lineTo(100, 75); ctx.lineTo(100, 25); ctx.fill(); } }
rectangular shape example
function draw() { var canvas = document.getElementById('canvas'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); ctx.fillRect(25, 25, 100, 100); ctx.clearRect(45, 45, 60, 60); ctx.strokeRect(50, 50, 50, 50); } }
stroke text example
function draw() { var ctx = document.getElementById('canvas').getContext('2d'); ctx.font = '48px serif'; ctx.strokeText('Hello world', 10, 50); }
canvas element
has only two attributes, width and height. These are both optional and can also be set using DOM properties. When no width and height attributes are specified, the canvas will initially be 300 pixels wide and 150 pixels high can be styled just like any normal image (margin, border, background...). These rules, however, don't affect the actual drawing on the canvas. When no styling rules are applied to the canvas it will initially be fully transparent
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.
line gradient example
var lineargradient = ctx.createLinearGradient(0, 0, 150, 150); var radialgradient = ctx.createRadialGradient(75, 75, 0, 75, 75, 100);
rendering contexts
which are used to create and manipulate the content shown, canvas element creates a fixed-size drawing surface that exposes one or more rendering contexts