Html5 javascript tutorial canvas

Canvas tutorial

is an HTML element which can be used to draw graphics via scripting (usually JavaScript). This can, for instance, be used to draw graphs, combine photos, or create simple animations.

First introduced in WebKit by Apple for the macOS Dashboard, has since been implemented in browsers. Today, all major browsers support it.

Before you start

Using the element is not very difficult, but you do need a basic understanding of HTML and JavaScript. The element is not supported in some older browsers, but is supported in recent versions of all major browsers. The default size of the canvas is 300 pixels × 150 pixels (width × height). But custom sizes can be defined using the HTML height and width property. In order to draw graphics on the canvas we use a JavaScript context object, which creates graphics on the fly.

In this tutorial

1. Basic usage
2. Drawing shapes
3. Applying styles and colors
4. Drawing text
5. Using images
6. Transformations
7. Compositing and clipping
8. Basic animations
9. Advanced animations
10. Pixel manipulation
11. Optimizing the canvas
12. Finale

See also

A note to contributors

Due to an unfortunate technical error that occurred the week of June 17, 2013, we lost the history of this tutorial, including attributions to all past contributors to its content. We apologize for this, and hope you’ll forgive this unfortunate mishap.

Found a content problem with this page?

This page was last modified on Feb 19, 2023 by MDN contributors.

Your blueprint for a better internet.

Источник

HTML Canvas Graphics

The HTML element is used to draw graphics on a web page.

The graphic to the left is created with . It shows four elements: a red rectangle, a gradient rectangle, a multicolor rectangle, and a multicolor text.

What is HTML Canvas?

The HTML element is used to draw graphics, on the fly, via JavaScript.

The element is only a container for graphics. You must use JavaScript to actually draw the graphics.

Canvas has several methods for drawing paths, boxes, circles, text, and adding images.

Browser Support

The numbers in the table specify the first browser version that fully supports the element.

Element
	4.0	9.0	2.0	3.1	9.0

Canvas Examples

A canvas is a rectangular area on an HTML page. By default, a canvas has no border and no content.

The markup looks like this:

Note: Always specify an id attribute (to be referred to in a script), and a width and height attribute to define the size of the canvas. To add a border, use the style attribute.

Here is an example of a basic, empty canvas:

Your browser does not support the canvas element.

Example

Add a JavaScript

After creating the rectangular canvas area, you must add a JavaScript to do the drawing.

Draw a Line

Example

Draw a Circle

Example

Draw a Text

Example

Stroke Text

Example

Draw Linear Gradient

Example

// Create gradient
var grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, «red»);
grd.addColorStop(1, «white»);

// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);

Draw Circular Gradient

Example

// Create gradient
var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, «red»);
grd.addColorStop(1, «white»);

// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);

Draw Image

HTML Canvas Tutorial

To learn more about , please read our HTML Canvas Tutorial.

Источник