HTML Canvas Examples
Try-it Yourself Examples
The examples below embeds canvas directly into the HTML code.
HTML Canvas is supported in all major browsers.
Canvas Intro
Canvas Coordinates
Canvas Lines
Draw a line
lineWidth - Set width of line
strokeStyle - Set color of line
lineCap - Set cap style of line
Canvas Fill and Stroke
fillStyle - Set the fill-color
strokeStyle - Set the outline color
fillStyle and strokeStyle combined
fillStyle and strokeStyle with alpha channel (opacity)
Canvas Shapes
Canvas Rectangles
rect() - Define a rectangle
fillRect() - Draw a filled rectangle
fillStyle - Fill color for rectangle
strokeRect() - Draw a stroked (outlined) rectangle
strokeStyle - Set color for the outline
Create three rectangles with the rect() method
Create three rectangles with the strokeRect() method
Canvas clearRect()
Clear a rectangular area in a filled rectangle
Clear a rectangular area inside and outside a filled rectangle
Clear a rectangular area in a stroked rectangle
Canvas Circles
Draw a full circle
Draw a full circle with colors
Draw a half circle
Draw an arc from start-angle 0 to end-angle 0.5 * PI
Draw an arc counterclockwise from start-angle 0 to end-angle 0.5 * PI
Canvas Curves
Canvas Linear Gradients
Create a linear gradient with two color stops
Fill an outlined rectangle with a gradient
Create a linear gradient with three color stops
Create a vertical linear gradient (vary the parameter values on the y-axis (change y2))
Create a diagonal linear gradient (varying both the x- and y-axis parameters)
Fill circle with gradient
Fill text with gradient
Fill outlined text with gradient
Canvas Radial Gradients
Create a radial gradient with two color stops
Radial gradient with smaller end circle
Move center point of end circle
Radial gradient with three color stops
Canvas Text
fillText() - Draw a filled text
strokeText() - Draw outlined text
font - Add bold and italic to font
Canvas Text Color
fillStyle - Set the fill color of text
strokeStyle - Set the otline color of text
Fill text with gradient
Fill outlined text with gradient
Canvas Text Alignment
textBaseline - Set the baseline (the vertical alignment) of text
textAlign - Set the horizontal alignment of text
Center text both vertically and horizontally
Canvas Shadows
shadowColor - Set shadow color for shapes
shadowColor - Set shadow color for text
shadowBlur - Set blur amount of shadow for shapes
shadowBlur - Set blur amount of shadow for text
shadowOffsetX- Set the horizontal distance of the shadow from the shape
shadowOffsetY- Set the vertical distance of the shadow from the shape
Canvas Images
drawImage(image, dx, dy) - Position an image on the canvas
drawImage(image, dx, dy, dwidth, dheight) - Position an image, and specify the width and height of the image on the canvas
drawImage(image, sx, sy, swidth, sheight, dx, dy, dwidth, dheight) - Clip the source image, before it is placed on the canvas
Canvas Transformations
translate() - Move an object/element by x and y
translate() - Move an object/element by x and y
rotate() - Rotate a rectangle by 20 degrees
rotate() - Rotate two rectangles by 20 degrees
scale() - Scale element up
scale() - Scale element down
scale() - Scale width to 200% and height to 300%
scale() - Scale with slider
transform() - Multiply the current transformation with the matrix described by the arguments
setTransform() - Resets the current transformation to the identity matrix, and then run a transformation described by the argument
Canvas Clipping
clip() - Create a circular clipping region. Then draw two rectangles
clip() - Create a triangle-shaped clipping region. Then draw two rectangles
clip() - Create a circular clipping region. Then draw an image
clip() - Create two rectangles as clipping region. Use evenodd rule
clip() - Create two rectangles as clipping region. Use nonzero rule
Canvas Compositing
globalCompositeOperation = "source-over"
globalCompositeOperation = "source-out"
globalCompositeOperation = "destination-over"
globalCompositeOperation = "destination-atop"
globalCompositeOperation = "lighter"
globalCompositeOperation = "copy"
globalCompositeOperation = "xor"
globalCompositeOperation = "multiply"
globalCompositeOperation = "screen"
globalCompositeOperation = "darken"
globalCompositeOperation = "lighten"
globalCompositeOperation = "hue"
globalCompositeOperation = "luminosity"