W3Schools.com

HTML5 canvas.getContext("2d") reference

Context

The canvas element has no drawing abilities of its own.

A canvas is a rectangular area, where you can control every pixel using JavaScript.

HTML5 has a built-in object for the canvas element, the getContext("2d") object.

The getContext("2d") object has methods to draw lines, boxes, circles, and more.

Colors and Styles

Attribute Value Description
fillStyle color/style The fill-color of the drawing, black is default
strokeStyle color/style The stroke-color of the drawing, black is default
lineCap butt
round
square		 The style of the ending of the line, butt is default
lineJoin bevel
round
miter		 The style of the corners of the line, miter is default
lineWidth number The width of the drawing stroke, 1 is default
miterLimit number The limit size of the corners in a line, default is 10
shadowColor color The color of the shadow, black is default
shadowOffsetX number The horizontal distance of the shadow, 0 is default
shadowOffsetY number The vertical distance of the shadow, 0 is default
shadowBlur number The size of the blurring effect, 0 is default
Method Description
createLinearGradient(x0,y0,z1,y1) Creates a gradient object. Use this object as a value to the strokeStyle or fillStyle attributes
createPattern(obj,pattern) Creates a pattern from an image to be used by the fillStyle or strokeStyle attributes
createRadialGradient(x0,y0,r0,x1,y1,r1) Creates a gradient object as a circle. Use this object as a value to the strokeStyle or fillStyle attributes
addColorStop(position,color) Specifies the gradient's position and color
drawCustomFocusRing(element)  
drawSystemFocusRing(element)  

Path, Curve, Circle, and Rectangle

Method Description
fillRect(x,y,w,h) Draws a filled rectangle using the color/style of the fillStyle attribute
strokeRect(x,y,w,h) Draws the lines of a rectangle using the color/style of the strokeStyle attribute
clearRect(x,y,w,h) Clears a rectangle area. All pixels inside this area will be erased
beginPath() Starts a new path, or clears the current path
moveTo(x,y) Moves the path to the specified point, without creating a line
closePath() Creates a line (path) from the last point in the path, to the first point. Completes the path
lineTo(x,y) Creates a line from the last point in the path to the given point
rect(x,y,w,h) Creates a rectangle
fill() Fills the current path with the selected color, black is default
stroke() Creates a stroke/path described with the specified path methods
clip() Creates an area in the canvas, and this area is the only visible area in the canvas
quadraticCurveTo(cpx,cpy,x,y) Creates a quadratic Bezier curve from the current point in the path to the specified path
bezierCurveTo(cpx,cpy,cpx,cpy,x,y) Creates a cubic Bezier curve from the current point in the path to the specified path
arc(x,y,r,sAngle,eAngle,aClockwise) Creates a circle, or parts of a circle
arcTo(x1,y1,x2,y2,radius) Creates an arc between two points
isPointInPath(x,y) Returns a Boolean value, true if the specified point is in the path, otherwise false

Transformations

Method Description
scale(x,y) Scales the drawings based on the x and y parameters
rotate(angle) Rotates the drawings based on the given angle
translate(x,y) Moves the drawings horizontally and vertically
transform(a,b,c,d,e,f) Changes the shape of the drawings based on a matrix
setTransform(a,b,c,d,e,f) Clears the current transformation, then makes the changes of the drawings based on a matrix

Text

Attribute Value Description
font fontproperties Specifies font properties used for writing on the canvas
textAlign start
end
left
right
center		 The alignment of the text, "start" is default
textBaseline alphabetic
bottom
hanging
ideographic
middle
top 		The vertical alignment of the text, "alphabetic" is default
Method Description
fillText(text,x,y,maxWidth) Draws text on the canvas, and fills it with the color set by the fillStyle attribute
strokeText(text,x,y,maxWidth) Draws text on the canvas, without filling, using the color set by the strokeStyle attribute.
measureText(text).width Measures the given text string, returns the result in pixels

Images and Pixel Manipulation

Attribute Value Description
width number Specifies the width of the imagedata object
height number Specifies the height of the imagedata object
data array An array containing the rgba values of all pixels in an imagedata object
Method Description
drawImage() Use a picture when drawing onto the canvas
createImageData() Creates a blank imagedata object
getImageData(x,y,w,h) Creates a new imagedata object, containing data from the canvas
putImageData(imgdat,dx,dy,x,y,w,h) Draws imagedata onto th canvas

Compositing

Attribute Value Description
globalAlpha number Specifies the transparency of the drawings
globalCompositeOperation source-atop
source-in
source-out
source-over
destination-atop
destination-in
destination-out
destination-over
lighter
copy
xor
vendorName-operationName 		Specifies how shapes and drawings are positioned onto the canvas, source-over is default

W3Schools Certification

W3Schools' Online Certification

The perfect solution for professionals who need to balance work, family, and career building.

More than 10 000 certificates already issued!

Get Your Certificate »

The HTML Certificate documents your knowledge of HTML.

The CSS Certificate documents your knowledge of advanced CSS.

The JavaScript Certificate documents your knowledge of JavaScript and HTML DOM.

The jQuery Certificate documents your knowledge of jQuery.

The XML Certificate documents your knowledge of XML, XML DOM and XSLT.

The ASP Certificate documents your knowledge of ASP, SQL, and ADO.

The PHP Certificate documents your knowledge of PHP and SQL (MySQL).

WEB HOSTING
Best Web Hosting
PHP MySQL Hosting
Best Hosting Coupons
UK Reseller Hosting
Cloud Hosting
Top Web Hosting
$3.98 Unlimited Hosting
Premium Website Design
WEB BUILDING
Download XML Editor
FREE Website BUILDER
Free Website Templates Free CSS Templates
Make Your Own Website
W3SCHOOLS EXAMS
Get Certified in:
HTML, CSS, JavaScript, XML, PHP, and ASP
W3SCHOOLS BOOKS
New Books:
HTML, CSS
JavaScript, and Ajax
STATISTICS
Browser Statistics
Browser OS
Browser Display
SHARE THIS PAGE