Canvas tag

In this chapter you will learn:

  1. Getting Started with the Canvas Element

Use canvas tag

The canvas element is a drawing surface that we drive using JavaScript. All of functionality from Canvas is exposed through a JavaScript object.

The following code uses the canvas element with basic fallback content.

<!DOCTYPE HTML><!--   ja v  a  2s .  c o  m-->
<html>
<head>
<style>
canvas {
      border: medium double black;
      margin: 4px
}
</style>
</head>
<body>
      <canvas width="500" height="200"> 
           Your browser doesn't support the <code>canvas</code> element 
    </canvas>
</body>
</html>

Click to view the demo

The width and height attributes specify the size of the canvas.

Next chapter...

What you will learn in the next chapter:

  1. How to get canvas context
Home » Javascript Tutorial » Canvas
Canvas tag
Canvas Context
Rectangle
Rectangle clear
Drawing State
Drawing state restore
Line width
Line Join Style
Line cap settings
Gradients
Linear Gradient
Radial Gradient
Path
Arcs
Two types of curve
Quadratic Bezier Curves
Cubic Bezier Curves
Clip
Text
Shadow
Transparency
Stoke style