HTML Canvas

<canvas> is an HTML element which can be used to draw graphics using scripting language. This can, for instance, be used to draw graphs, make photo composition or simple animations.

What is HTML Canvas?

  • The HTML <canvas> element is used to draw graphics, on the fly, via JavaScript.
  • The <canvas> 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 Canvas

Element Chrome Edge Firefox Safari Opera
<canvas> 4.0 9.0 2.0 3.1 9.0

The <canvas> 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 px × 150 px (width × height). But custom sizes can be defined using the HTML height and width property.

Canvas Example

<canvas id="myCanvas" width="200" height="100"></canvas>

Output

Draw a Line

<script>
  var c = document.getElementById("myCanvasline");
  var ctx = c.getContext("2d");
  ctx.moveTo(0, 0);
  ctx.lineTo(200, 100);
  ctx.stroke();
</script>

Drow a Circle

<script>
  var c = document.getElementById("myCanvascircle");
  var ctx = c.getContext("2d");
  ctx.begainPath();
  ctx.arc(95, 50, 40, 0, 2 * Math.PI);
  ctx.stroke();
</script>

Drow a Text

<script>
  var c = document.getElementById("myCanvasText");
  var ctx = c.getContext("2d");
  ctx.font = "30px Arial";
  ctx.fillText("Hello World", 10, 50);
</script>
<script>
  var c = document.getElementById("myStrokeText");
  var ctx = c.getContext("2d");
  ctx.font = "30px Arial";
  ctx.strokeText("Hello World", 10, 50);
</script>

Drow Linear and Circular Gradient

<script>
  var c = document.getElementById("myLinear");
  var ctx = c.getContext("2d");
  var grd = ctx.createLinearGradient(0, 0, 200, 0);
  grd.addColorStop(0, "green");
  grd.addColorStop(1, "white");

  ctx.fillStyle = grd;
  ctx.fillRect(10, 10, 150, 80);
</script>
<script>
  var c = document.getElementById("myCircular");
  var ctx = c.getContext("2d");
  var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
  grd.addColorStop(0, "green");
  grd.addColorStop(1, "white");

  ctx.fillStyle = grd;
  ctx.fillRect(10, 10, 150, 80);
</script>

The <canves> Element

The <canves> element has only two attributes, width and height. These are both optional and can also be set using DOM properties. When no width and height attributes are specified, the canvas will initially be 300 pixels width and 150 pixels hight.

Draws two intersecting rectangles

<script>
  var canvas = document.getElementById('canvas');
  if (canvas.getContext) {
  var ctx = canvas.getContext('2d');

  ctx.fillStyle = 'rgb(200, 0, 0)';
  ctx.fillRect(10, 10, 50, 50);

  ctx.fillStyle = 'rgba(0, 0, 200, 0.5)';
  ctx.fillRect(30, 30, 50, 50);}
</script>

To learn more about Canvas & SVG

HTML Canvas Tutorials

HTML SVG Tutorials

Policy

GDATAMART.COM is optimized for learning & job information; The users try to improve your knowledge and practical experience through this site but we cannot warrant full correctness of all content... Learn More → | Sitemap →

© 2020 GDATAMART | All Rights Reserved