Blog

Using the canvas element for graphics and animations

Using the canvas element for graphics and animations

HTML5 provides features and control to create and modify graphics and animations directly in the client web browser using the <canvas> tag element in the web development structure language along with JavaScript interactive web development scripts. The <canvas> tag element is widely used in HTML5 webpage websites to create complex visual content data such as numerical data-based charts, small graphical games, and interactive user-defined graphics images.

Using the canvas element for graphics and animations

So, let’s learn more about the features and functions of the <canvas> element for graphics and animation in HTML5 web development.

The basic structure of the <canvas> element in HTML5 web development.

The purpose of the <canvas> element.

The <canvas> tag element in HTML5 web development scripts acts as a container for designing complex graphic and image structure layouts using the JavaScript language.

Basic <canvas> element syntax.

<canvas id=”sampleCanvas” width=”300″ height=”500″></canvas>

HTML5 <canvas> element tag attributes.

  • id – This design serves as a unique JavaScript identifier for the canvas object element.
  • width – This design displays the width of the canvas object in pixels.
  • height – This design displays the height of the canvas object in pixels.

Example of HTML5 <canvas> element tag attributes.

<canvas id=”testCanvas” width=”400″ height=”500″></canvas>

Drawing on a canvas element.

To create a drawing object on a canvas element, a web developer must use the JavaScript programming language to access a drawing context. The most basic canvas context here is 2D, but you can create other contexts, such as webgl, for 3D graphics if needed.

Creating the Context in Javascript.

<!DOCTYPE html>

<html>

<head>

<title>Let’s try 2D Context Canvas Attributes</title>

</head>

<body>

<canvas id=”sampleCanvas” width=”400″ height=”200″ style=”border:2px solid red;”></canvas>

<script>

//here we Get the canvas element

const canvas = document.getElementById(‘sampleCanvas’);

// here we Get the 2D drawing object context

const cntx = canvas.getContext(‘2d’);

//here it Draw something to prove it works or not

cntx.fillStyle = ‘yellow’;

cntx.fillRect(20, 20, 200, 100);

// Here we draw text in the drawings object

cntx.font = ’20px times new roman’;

cntx.fillStyle = ‘blue’;

cntx.fillText(‘Vcanhelpsu’, 40, 70);

</script>

</body>

</html>

Basic canvas drawing operation.

Code to create a rectangle shape in JavaScript using the HTML markup language.

<!DOCTYPE html>

<html>

<head>

<title>Let’s try Canvas Rectangle Attributes</title>

</head>

<body>

<canvas id=”sampleCanvas” width=”200″ height=”200″ style=”border:2px solid green;”></canvas>

<script>

// Here we get the canvas element with JavaScript

const canvas = document.getElementById(‘sampleCanvas’);

// Here we get the 2D drawing context element

const ctx = canvas.getContext(‘2d’);

// Here we set the fill color for the canvas object

ctx.fillStyle = ‘red’;

// Draw a filled rectangle

ctx.fillRect(20, 20, 120, 80);

</script>

</body>

</html>

Drawing a circle using JavaScript canvas.

Code to create a circle shape in JavaScript using the HTML markup language.

<!DOCTYPE html>

<html>

<head>

<title>Let’s try Canvas Circle Attributes</title>

</head>

<body>

<canvas id=”sampleCanvas” width=”500″ height=”500″ style=”border:3px solid lime;”></canvas>

<script>

//here we Get canvas element and add context

const canvas = document.getElementById(‘sampleCanvas’);

const cntx = canvas.getContext(‘2d’);

// here we start a new path

cntx.beginPath();

// here we Draw a basic circle x, y, radius angle, startAngle, endAngle, etc

cntx.arc(250, 250, 140, 0, 3 * Math.PI);

// here we Set the stroke color

cntx.strokeStyle = ‘blue’;

// Here we draw the outline canvas object

cntx.stroke();

</script>

</body>

</html>

Drawing text using JavaScript canvas.

Code to create a text object in JavaScript using the HTML markup language.

<!DOCTYPE html>

<html>

<head>

<title>Let’s try Canvas Text Attributes</title>

</head>

<body>

<canvas id=”sentencesCanvas” width=”500″ height=”200″ style=”border:3px solid red;”></canvas>

<script>

// Here we get the canvas and its context

const canvas = document.getElementById(‘sentencesCanvas’);

const cntx = canvas.getContext(‘2d’);

// Here we set the font name for canvas drawing text

cntx.font = ’40px monotype corsiva’;

//here we Set fill text color

cntx.fillStyle = ‘blue’;

// here we Draw text content information

cntx.fillText(‘Vcanhelpsu Edtech’, 70, 100);

</script>

</body>

</html>

Using animation with the JavaScript <canvas> tag element.

To create animations using the JavaScript canvas element in HTML5, web developers can use the JavaScript language to update the canvas content multiple times within a webpage. This is typically done using the requestAnimationFrame function in JavaScript, which schedules the next update to the current canvas element and moves it forward on the next repaint.

Basic JavaScript canvas element animation example.

<!DOCTYPE html>

<html>

<head>

<title>Let’s try Canvas Animation Attributes </title>

</head>

<body>

<canvas id=”animationCanvas” width=”500″ height=”200″ style=”border:2px solid lime;”></canvas>

<script>

const canvas = document.getElementById(‘animationCanvas’);

const cntx = canvas.getContext(‘2d’);

let p = 0;

const speed = 3;

function draw() {

// here we Clear the canvas element

cntx.clearRect(0, 0, canvas.width, canvas.height);

// here we Draw a rectangle canvas with object element

cntx.fillStyle = ‘yellow’;

cntx.fillRect(p, 70, 140, 70);

//here we update position

p += speed;

// here we Reset the position if it goes off-screen during preview

if (p > canvas.width) {

p = -40;

}

//here it Loop canvas animation

requestAnimationFrame(draw);

}

//here it Start animation

draw();

</script>

</body>

</html>

Advanced graphics and effects with canvas in JavaScript.

Web developers can create drawing images with JavaScript Canvas to insert and draw Image Drawing, Gradient and Pattern, Linear Gradient, and Pattern objects into JavaScript webpages.

Group JavaScript canvas, Image Drawing, Gradient and Pattern, Linear Gradient, element html example.

<!DOCTYPE html>

<html>

<head>

<title>Let’s try Canvas Image, Gradient, and Pattern JavaScript attributes</title>

</head>

<body>

<canvas id=”testCanvas” width=”500″ height=”500″ style=”border:2px solid lime;”></canvas>

<script>

const canvas = document.getElementById(‘testCanvas’);

const cntx = canvas.getContext(‘2d’);

//here we Draw gradient image background

const gradient = cntx.createLinearGradient(0, 0, canvas.width, canvas.height);

gradient.addColorStop(0, ‘yellow’);

gradient.addColorStop(1, ‘lime’);

cntx.fillStyle = gradient;

cntx.fillRect(0, 0, canvas.width, canvas.height);

// here we Load and draw main image on top position

const image = new Image();

imag.src = ‘https://www.magnific.com/free-vector/grainy-gradient-background-orange-pink-violet_154661240.htm/400×300.jpg’;

image.onload = function() {

cntx.drawImage(imag, 130, 120, 270, 190);

};

//here we load and apply pattern overlay

const patternImg = new Image();

patternImg.src = ‘https://www.magnific.com/free-vector/vibrant-summer-ombre-background-vector_15847314/100×1000.png’;

patternImg.onload = function() {

const pattern = cntx.createPattern(patternImg, ‘repeat’);

// here we Use transparency, so underlying content is visible

cntx.globalAlpha = 0.4;

cntx.fillStyle = pattern;

cntx.fillRect(0, 0, canvas.width, canvas.height);

//here we Reset alpha value

cntx.globalAlpha = 2.0;

};

</script>

</body>

</html>