Menu
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

JS Reference

JS by Category JS by Alphabet

JavaScript

JS Arrays JS Boolean JS Classes JS Dates JS Error JS Global JS JSON JS Maps JS Math JS Numbers JS Objects JS Operators JS Precedence JS Promises JS RegExp JS Sets JS Statements JS Strings JS TypedArray

Window

Window Object Window Console Window History Window Location Window Navigator Window Screen

HTML DOM

HTML Documents HTML Elements HTML Attributes HTML Collection HTML NodeList HTML DOMTokenList HTML Styles
alignContent alignItems alignSelf animation animationDelay animationDirection animationDuration animationFillMode animationIterationCount animationName animationTimingFunction animationPlayState background backgroundAttachment backgroundClip backgroundColor backgroundImage backgroundOrigin backgroundPosition backgroundRepeat backgroundSize backfaceVisibility border borderBottom borderBottomColor borderBottomLeftRadius borderBottomRightRadius borderBottomStyle borderBottomWidth borderCollapse borderColor borderImage borderImageOutset borderImageRepeat borderImageSlice borderImageSource borderImageWidth borderLeft borderLeftColor borderLeftStyle borderLeftWidth borderRadius borderRight borderRightColor borderRightStyle borderRightWidth borderSpacing borderStyle borderTop borderTopColor borderTopLeftRadius borderTopRightRadius borderTopStyle borderTopWidth borderWidth bottom boxShadow boxSizing captionSide caretColor clear clip color columnCount columnFill columnGap columnRule columnRuleColor columnRuleStyle columnRuleWidth columns columnSpan columnWidth counterIncrement counterReset cssFloat cursor direction display emptyCells filter flex flexBasis flexDirection flexFlow flexGrow flexShrink flexWrap font fontFamily fontSize fontStyle fontVariant fontWeight fontSizeAdjust height isolation justifyContent left letterSpacing lineHeight listStyle listStyleImage listStylePosition listStyleType margin marginBottom marginLeft marginRight marginTop maxHeight maxWidth minHeight minWidth objectFit objectPosition opacity order orphans outline outlineColor outlineOffset outlineStyle outlineWidth overflow overflowX overflowY padding paddingBottom paddingLeft paddingRight paddingTop pageBreakAfter pageBreakBefore pageBreakInside perspective perspectiveOrigin position quotes resize right scrollBehavior tableLayout tabSize textAlign textAlignLast textDecoration textDecorationColor textDecorationLine textDecorationStyle textIndent textOverflow textShadow textTransform top transform transformOrigin transformStyle transition transitionProperty transitionDuration transitionTimingFunction transitionDelay unicodeBidi userSelect verticalAlign visibility width wordBreak wordSpacing wordWrap widows zIndex

HTML Events

HTML Events HTML Event Objects HTML Event Properties HTML Event Methods

Web APIs

API Canvas API Console API Fetch API Fullscreen API Geolocation API History API MediaQueryList API Storage API Validation API Web

HTML Objects

<a> <abbr> <address> <area> <article> <aside> <audio> <b> <base> <bdo> <blockquote> <body> <br> <button> <canvas> <caption> <cite> <code> <col> <colgroup> <datalist> <dd> <del> <details> <dfn> <dialog> <div> <dl> <dt> <em> <embed> <fieldset> <figcaption> <figure> <footer> <form> <head> <header> <h1> - <h6> <hr> <html> <i> <iframe> <img> <ins> <input> button <input> checkbox <input> color <input> date <input> datetime <input> datetime-local <input> email <input> file <input> hidden <input> image <input> month <input> number <input> password <input> radio <input> range <input> reset <input> search <input> submit <input> text <input> time <input> url <input> week <kbd> <label> <legend> <li> <link> <map> <mark> <menu> <menuitem> <meta> <meter> <nav> <object> <ol> <optgroup> <option> <output> <p> <param> <pre> <progress> <q> <s> <samp> <script> <section> <select> <small> <source> <span> <strong> <style> <sub> <summary> <sup> <table> <tbody> <td> <tfoot> <th> <thead> <tr> <textarea> <time> <title> <track> <u> <ul> <var> <video>

Other References

CSSStyleDeclaration JS Conversion


HTML DOM Canvas

The <canvas> element defines a bitmapped area in an HTML page.

The Canvas API allows JavaScript to draw graphics on the canvas.

The Canvas API can draw shapes, lines, curves, boxes, text, and images, with colors, rotations, transparencies, and other pixel manipulations.

Adding Canvas to HTML

You can add a canvas element anywhere in an HTML page with the <canvas> tag:

Example

<canvas id="myCanvas" width="300" height="150"></canvas>
Try it Yourself »

How to Access a Canvas Element

You can access a <canvas> element with the HTML DOM method getElementById():

const myCanvas = document.getElementById("myCanvas");

To draw in the canvas you need to create a 2D context object:

const ctx = myCanvas.getContext("2d");

Note

The HTML <canvas> element itself has no drawing abilities.

You must use JavaScript to draw any graphics.

The getContext() method returns an object with tools (methods) for drawing.


Drawing on the Canvas

After you have created a 2D context, you can draw on the canvas.

The fillRect() method draws a black rectangle with a top-left corner at position 20,20. The rectangle is 150 pixel wide and 100 pixels high.

Example

const myCanvas = document.getElementById("myCanvas");
const ctx = myCanvas.getContext("2d");

ctx.fillRect(20, 20, 150, 100);
Try it Yourself »

Using Colors

The fillStyle property sets the fill color of the drawing object:

Example

const myCanvas = document.getElementById("myCanvas");
const ctx = myCanvas.getContext("2d");

ctx.fillStyle = "red";
ctx.fillRect(20, 20, 150, 100);
Try it Yourself »

You can also create a new <canvas> element with the document.createElement() method, and add the element to an existing HTML page:

Example

const myCanvas = document.createElement("canvas");
document.body.appendChild(myCanvas);
const ctx = myCanvas.getContext("2d");

ctx.fillStyle = "red";
ctx.fillRect(20, 20, 150, 100);
Try it Yourself »

Paths

The common way to draw on the canvas is to:

  1. Begin a Path - beginPath()
  2. Move to a Point - moveTo()
  3. Draw in the Path - lineTo()
  4. Draw the Path - stroke()

Example

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(20, 100);
ctx.lineTo(70, 100);
ctx.stroke();
Try it Yourself »

Complete Canvas API Reference

This reference covers all Properties and Methods of the getContext("2d") Object, used to draw text, lines, boxes, circles, pictures, and more on the canvas.

Drawing Methods

There are only 3 methods to draw directly on the canvas:

Method Description
fillRect() Draws a "filled" rectangle
strokeRect() Draws a rectangle (with no fill)
clearRect() Clears specified pixels within a rectangle

Path Methods

Method Description
beginPath() Begins a new path or resets the current path
closePath() Adds a line to the path from the current point to the start
isPointInPath() Returns true if the specified point is in the current path
moveTo() Moves the path to a point in the canvas (without drawing)
lineTo() Adds a line to the the path
fill() Fills the current path
rect() Adds a rectangle to the path
stroke() Draws the current path
 Circles and Curves
bezierCurveTo() Adds a cubic Bézier curve to the path
arc() Adds an arc/curve (circle, or parts of a circle) to the path
arcTo() Adds an arc/curve between two tangents to the path
quadraticCurveTo() Adds a quadratic Bézier curve to the path


Text

Method/Prop Description
direction Sets or returns the direction used to draw text
fillText() Draws "filled" text on the canvas
font Sets or returns the font properties for text content
measureText() Returns an object that contains the width of the specified text
strokeText() Draws text on the canvas
textAlign Sets or returns the alignment for text content
textBaseline Sets or returns the text baseline used when drawing text

Colors, Styles, and Shadows

Method/Property Description
addColorStop() Specifies the colors and stop positions in a gradient object
createLinearGradient() Creates a linear gradient (to use on canvas content)
createPattern() Repeats a specified element in the specified direction
createRadialGradient() Creates a radial/circular gradient (to use on canvas content)
fillStyle Sets or returns the color, gradient, or pattern used to fill the drawing
lineCap Sets or returns the style of the end caps for a line
lineJoin Sets or returns the type of corner created, when two lines meet
lineWidth Sets or returns the current line width
miterLimit Sets or returns the maximum miter length
shadowBlur Sets or returns the blur level for shadows
shadowColor Sets or returns the color to use for shadows
shadowOffsetX Sets or returns the horizontal distance of the shadow from the shape
shadowOffsetY Sets or returns the vertical distance of the shadow from the shape
strokeStyle Sets or returns the color, gradient, or pattern used for strokes

Transformations

Method Description
scale() Scales the current drawing bigger or smaller
rotate() Rotates the current drawing
translate() Remaps the (0,0) position on the canvas
transform() Replaces the current transformation matrix for the drawing
setTransform() Resets the current transform to the identity matrix. Then runs transform()

Image Drawing

Method Description
drawImage() Draws an image, canvas, or video onto the canvas

The ImageData Object / Pixel Manipulation

Method/Property Description
createImageData() Creates a new, blank ImageData object
getImageData() Returns an ImageData object that copies the pixel data for the specified rectangle on a canvas
ImageData.data Returns an object that contains image data of a specified ImageData object
ImageData.height Returns the height of an ImageData object
ImageData.width Returns the width of an ImageData object
putImageData() Puts the image data (from a specified ImageData object) back onto the canvas

Compositing

Property Description
globalAlpha Sets or returns the current alpha or transparency value of the drawing
globalCompositeOperation Sets or returns how a new image are drawn onto an existing image

Other Methods

Method Description
clip() Clips a region of any shape and size from the original canvas
save() Saves the state of the current drawing context and all its attributes
restore() Restores the previously saved state and attributes
createEvent()  
getContext()  
toDataURL()  

Standard Properties and Events

The canvas object also supports the standard properties and events.


Related Pages

Canvas tutorial: Canvas Tutorial

HTML tutorial: HTML5 Canvas

HTML reference: HTML <canvas> tag


Browser Support

The <canvas> element is an HTML5 standard (2014).

Canvas API is supported in all modern browsers:

Chrome Edge Firefox Safari Opera IE
Yes Yes Yes Yes Yes 9-11

×

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail:
sales@w3schools.com

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail:
help@w3schools.com

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Copyright 1999-2024 by Refsnes Data. All Rights Reserved. W3Schools is Powered by W3.CSS.