Javascript Reference - HTML DOM Canvas Object








The canvas object supports the standard properties and events.

The HTML5 <canvas> tag is used to draw graphics with javaScript.

We can access a <canvas> element by using getElementById().


<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="150"></canvas>
<button onclick="myFunction()">test</button>
<script>
function myFunction() {<!--   ww w  . ja  v a 2 s. c  o  m-->
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.fillStyle = "red";
    ctx.fillRect(20, 20, 150, 100);
}
</script>

</body>
</html>

The code above is rendered as follows:

addColorStop() Position added colors in a gradient object
arc() Creates circle part
arcTo() Creates an curve between two tangents
beginPath() Begins a path
bezierCurveTo() Creates a cubic Bezier curve
clearRect() Clears the given rectangle
clip() Clips a region from the canvas
closePath() Close a path by linking current point back to the starting point
createImageData() Creates a new ImageData object
createLinearGradient() Creates a linear gradient
createPattern() Create a pattern for later use
createRadialGradient() Creates a circular gradient
drawImage() Draws an image, canvas, or video
fill() Fills the path
fillRect() Draws a filled rectangle
fillStyle Sets or gets the color, gradient, or pattern
fillText() Fill text on the canvas
font Sets or gets the font properties
getImageData() Get the ImageData object from canvas
globalAlpha Sets or gets the current transparency value
globalCompositeOperation Deal with the image overlap
ImageData ImageData object returned from getImageData()
isPointInPath() Check if the specified point is in the current path
lineCap Sets or gets the style of the line ending caps
lineJoin Sets or gets the type of line join
lineTo() Adds a new point to create a line from that point to the last specified point
lineWidth Sets or gets the current line width
measureText() Calculate the width of the specified text
miterLimit Sets or gets the maximum miter length
moveTo() Move the drawing cursor
putImageData() Put the image data from a ImageData object back to the canvas
quadraticCurveTo() Create a quadratic Bezier curve
rect() Create a rectangle
restore() Popup saved state
rotate() Rotate the current drawing
save() Push drawing state
scale() Make the drawing bigger or smaller
setTransform() Set the transform to the identity matrix
shadowBlur Sets or gets the blur level for shadows
shadowColor Sets or gets the color for shadows
shadowOffsetX Sets or gets the horizontal distance between the shadow and the shape
shadowOffsetY Sets or gets the vertical distance between the shadow and the shape
stroke() Draw the path defined
strokeRect() Draws a rectangle with no fill
strokeStyle Sets or gets the color, gradient, or pattern used for strokes
strokeText() Draws text without filling
textAlign Sets or gets the text alignment
textBaseline Sets or gets the text baseline
toDataURL() Encode canvas to URL
transform() Set new the current transformation matrix
translate() Reposition the (0,0) on the canvas