Skip to content
Search

Canvas element

lastmod 2023-08-22created 2017-01-3021 edits

The canvas element is part of HTML5 and allows dynamic, scriptable rendering of 2D shapes and bitmap images. It is a low-level, procedural model that updates a bitmap and does not have a built-in scene graph.

Categories

APIs

Example

The following code creates a canvas element in an HTML document: 

<canvas id="example" width="200" height="200">
브라우저가 HTML5 캔버스를 지원하지 않으면 이 문구가 표시됩니다.
</canvas>

You can draw on the canvas using JavaScript: 

var example = document.getElementById('example');
var context = example.getContext('2d');
context.fillStyle = 'red';
context.fillRect(30, 30, 50, 50);

This code draws a red rectangle on the screen.

The canvas API also provides save() and restore() to save and restore all properties of the canvas context.

Bold / Italic font 

ctx.font = "italic 10pt Courier";
ctx.font = "bold 10pt Courier";
ctx.font = "italic bold 10pt Courier";

Draw Image 

var img = new Image();
img.onload = function() {
    ctx.drawImage(img, 0, 0);
}
img.src = "http://upload.wikimedia.org/wikipedia/commons/d/d2/Svg_example_square.svg";

Rotation Text 

context.save();  // Important !
context.translate(x, y);
context.rotate(-Math.PI / 4);
context.textAlign = 'center';
context.fillText('center', 0, lineHeight / 2);
context.restore();  // Important !

Apply it between context.save() and context.restore() to prevent other Shapes from being rotated as well.

Line Style

lineWidth
Sets the line width ( default 1.0 )
Canvas_context.lineWidth_samples.png
strokeStyle
Sets the line color
lineCap
Sets the style of line ends ( butt, round, square )
Canvas_context.lineCap_samples.png
lineJoin
Sets the style where lines bend (bevel, round, miter)
Canvas_context.lineJoin_samples.png

How to draw dashed lines 

context.setLineDash([10, 2]);

Rounded Rectangle 

context.fillStyle = 'red';
context.strokeStyle = 'blue';
context.lineWidth = 2;
context.beginPath();
context.roundRect(x1, y1, width, height, [5, 5, 5, 5]);
context.fill();
context.stroke();

Bezier Curve

HTML5_canvas_-bezier_curve-_hint.png

quadraticCurveTo

Quadratic Bezier curve (1 control point) 

quadraticCurveTo(제어점x, 제어점y, 종료점x, 종료점y)

bezierCurveTo

Cubic Bezier curve (2 control points) 

bezierCurveTo(제어점x1, 제어점y1, 제어점x2, 제어점y2, 종료점x, 종료점y)

Libraries

The Canvas API is extremely powerful, but not always simple to use. The libraries listed below can make the creation of canvas-based projects faster and easier.

  • EaselJS is an open-source canvas library that makes creating games, generative art, and other highly graphical experiences easy.
  • Fabric.js is an open-source canvas library with SVG parsing capabilities.
  • heatmap.js is an open-source library for creating canvas-based data heat maps.
  • JavaScript InfoVis Toolkit creates interactive data visualizations.
  • Konva.js is a 2D canvas library for desktop and mobile applications.
  • p5.js includes a full set of canvas drawing functionality for artists, designers, educators, and beginners.
  • Paper.js is an open-source vector graphics scripting framework that runs on top of the HTML5 Canvas.
  • Phaser is a fast, free, and fun open-source framework for Canvas and WebGL powered browser games.
  • Processing.js is a port of the Processing visualization language.
  • Pts.js is a library for creative coding and visualization using canvas and SVG.
  • Rekapi is an animation key-frame API for Canvas.
  • Scrawl-canvas is an open-source JavaScript library for creating and manipulating 2D canvas elements.
  • The ZIM framework provides conveniences, components, and controls for coding creativity on the canvas. It includes accessibility and many colorful tutorials.
  • PixiJS

See also

Favorite site

Guide

author Zer0 sitemap