DHTML

Canvas

The HTML <canvas> element allows to draw graphics and animations with the canvas scripting API or the WebGL API.

Most browsers support the OffscreenCanvas interface, which provides off-screen rendering. It is available in both the window and worker contexts.

The Canvas API largely focuses on 2D graphics. The WebGL API draws hardware-accelerated 2D and 3D graphics.

HTMLCanvasElement

The HTMLCanvasElement interface represents the HTML <canvas> element.

property description
width Specifies width of canvas in pixels.
height Specifies height of canvas in pixels.
method description
getContext(type) Returns context of given type. Possible values of the type:
  • "2d" - returns CanvasRenderingContext2D object representing a two-dimensional rendering context
  • "webgl" - returns WebGLRenderingContext object representing a three-dimensional rendering context
  • "webgl2" - returns WebGL2RenderingContext object representing a three-dimensional rendering context
  • "bitmaprenderer" - returns ImageBitmapRenderingContext which only provides functionality to replace the content of the canvas with a given ImageBitmap
toDataURL([type [, encoderOpt]]) Returns a data URI containing a representation of the image in the format specified by the type parameter (defaults to PNG). The returned image is in a resolution of 96 dpi.
toBlob(cb [, mimeType [, qualityArgument]]) Creates a Blob object representing the image contained in the canvas. Default mimeType is "image/png". The cb parameter is a callback function with the resulting Blob object as a single argument.
transferControlToOffscreen() Transfers control to an OffscreenCanvas object, either on the main thread or on a worker. 
var fullQuality = canvas.toDataURL('image/jpeg', 1.0);
var mediumQuality = canvas.toDataURL('image/jpeg', 0.5);
var lowQuality = canvas.toDataURL('image/jpeg', 0.1);
var offscreen = canvas.transferControlToOffscreen();
var gl = offscreen.getContext('webgl');

// ... some drawing using the gl context ...

// Push frames back to the original HTMLCanvasElement
gl.commit();

OffscreenCanvas

property description
width Specifies width of canvas in pixels.
height Specifies height of canvas in pixels.
method description
getContext(type) Returns context of given type. Possible values of the type:
  • "2d" - returns CanvasRenderingContext2D object representing a two-dimensional rendering context
  • "webgl" - returns WebGLRenderingContext object representing a three-dimensional rendering context
  • "webgl2" - returns WebGL2RenderingContext object representing a three-dimensional rendering context
  • "bitmaprenderer" - returns ImageBitmapRenderingContext which only provides functionality to replace the content of the canvas with a given ImageBitmap
convertToBlob([opt]) Returns a Promise on a Blob object representing the image contained in the canvas.
transferToImageBitmap() Creates an ImageBitmap object from the most recently rendered image of the OffscreenCanvas. 
const blobPromise = offscreenCanvas.convertToBlob({
  type: "image/jpeg",
  quality: 0.95
});

<canvas> size

By default size of canvas is 150x300 pixels. You can change it by attributes width and height of the <canvas> element. 

<canvas id="myCanvas" width="100" height="100">
Canvas not supported
</canvas>
// js script
var canvas = document.
    getElementById('rectanglesCanvas');
        
var ctx = canvas.getContext('2d');  

// ... draw something

Don't confuse with the size of the <canvas> element, which can be specified with style. If these sizes are different, you will see a scaled image.

<canvas 
 style="border: 1px solid black; width:200px; height:200px;"  
 id="myCanvas">
Canvas not supported
</canvas>
var canvas = document.
    getElementById('myCanvas');
var ctx = canvas.getContext('2d');      
// draw square, but we will see rectangle    
ctx.rect(0, 0, 50, 50);
ctx.fillStyle = 'red';
ctx.fill();
Canvas not supported

tainted canvas

You can taint canvas if you draw an image from other domain. This affects on following methods:

  1. ctx.getImageData()
  2. canvas.toBlob()
  3. canvas.toDataURL()

In this case you can see message in console:

The canvas has been tainted by cross-origin data.
or
Tainted canvases may not be exported.

You can prevent this 

// This will work if the remote server sets the header
// Access-Control-Allow-Origin "*"
img.crossOrigin = "Anonymous";