VOOZH about

URL: https://www.geeksforgeeks.org/html/html-canvas-basics/

⇱ HTML Canvas Basics - GeeksforGeeks

  • Courses
  • Tutorials
  • Interview Prep

HTML Canvas Basics

Last Updated : 21 Jan, 2026

HTML Canvas is an element used to draw graphics dynamically on a web page using JavaScript. It acts as a container for rendering shapes, text, images, and animations.

  • Requires JavaScript to draw graphics on the canvas.
  • Supports drawing paths, rectangles, circles, text, and images.
  • Represents a rectangular drawing area on a webpage.
  • Has no border or content by default unless styled or scripted.

Here, By using of canvas with a linear gradient & stroke-style text in HTML.

Syntax:

<canvas>
 Content...
</canvas>

Note: It is recommended to have an id attribute (to be referred to in a script), and a width and height attribute to define the size of the canvas. To add a border, use the style attribute.

Supported Properties of HTML Canvas

Canvas PropertyDescription
Colors and StylesUsed to set fill color, stroke color, and styling for shapes and text.
ShadowsAdds shadow effects to shapes and text drawn on the canvas.
Line StylesControls line width, line caps, and line joins for strokes.
RectanglesUsed to draw and manipulate rectangular shapes on the canvas.
PathsAllows drawing custom shapes using lines and curves.
TransformationsEnables scaling, rotating, translating, and skewing canvas objects.
TextUsed to draw and style text on the canvas area.
Pixel ManipulationAllows direct access and modification of pixel data.
CompositingControls how new drawings are combined with existing content.
Image DrawingUsed to draw images onto the canvas from external sources.

Drawing Shapes and Graphics Using HTML Canvas

There are various shapes that can be possible to draw using Canvas, which are discussed below.

Example 1: To demonstrates the empty canvas

Example 2: Using HTML Canvas to draw a circle

Example 3: Write a text using HTML Canvas.

Example 4: Use of linear-gradient property in HTML Canvas.

Example 5: Draw the image by using the canvas tag.

Output:

👁 Image
Drawing image with tag

Example 6: Using the Shadow blur property in HTML Canvas.

Output:

👁 Image
HTML Canvas with Shadow blur property

Example 7: Use rotate() method in the HTML Canvas.

Example 8: By using the translate() method to remap the (0,0) position on the canvas.

Output:

👁 Image
HTML Canvas with translate() method

Example 9: By using the transform() method in HTML Canvas.

Creating Animation in HTML Canvas

Animation in an HTML5 canvas is created using JavaScript to draw and update graphics repeatedly over time. By controlling the timing of redraws, objects on the canvas appear to move or change, creating an animation effect.

  • JavaScript controls canvas animation by repeatedly updating drawings at specific time intervals.
  • setInterval(callback, time) runs a function continuously after every fixed time delay, making it suitable for simple animations.
  • setTimeout(callback, time) runs a function only once after a delay and is often used recursively for controlled animations.
  • These timing methods help manage frame updates, movement speed, and smooth visual effects on the canvas.
Comment