DOM Canvas 개요

Canvas Description

The HTML5 <canvas> tag is used to draw graphics, on the fly, via scripting (usually JavaScript).

However, the <canvas> element has no drawing abilities of its own (it is only a container for graphics) - you must use a script to actually draw the graphics.

The getContext() method returns an object that provides methods and properties for drawing on the canvas.

This reference will cover the properties and methods of the getContext("2d") object, which can be used to draw text, lines, boxes, circles, and more - on the canvas.

What is HTML Canvas?

The HTML <canvas> element is used to draw graphics, on the fly, via scripting (usually JavaScript).

The <canvas> element is only a container for graphics. You must use a script to actually draw the graphics.

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

context = canvas.getContext(contextId [, ... ] )

Returns an object that exposes an API for drawing on the canvas. The first argument specifies the desired API, either "2d", "bitmaprenderer" or "webgl". Subsequent arguments are handled by that API.

This specification defines the "2d" and "bitmaprenderer" contexts below. There is also a specification that defines a "webgl" context. [WEBGL]

Returns null if the given context ID is not supported, if the canvas has already been initialised with the other context type (e.g. trying to get a "2d" context after getting a "webgl" context).

 

reference -> https://html.spec.whatwg.org/multipage/scripting.html#dom-canvas-getcontext