How to Set Canvas size using javascript

In JavaScript, setting the canvas size primarily involves two methods: through HTML attributes and through JavaScript code.

1. Setting Canvas Size via HTML Attributes

Directly setting the canvas width and height in the HTML document is the simplest approach. This can be achieved using the width and height attributes. For example:

html
<canvas id="myCanvas" width="500" height="300"></canvas>

This code creates a canvas element with a width of 500 pixels and a height of 300 pixels.

2. Setting Canvas Size via JavaScript Code

If you need to dynamically adjust the canvas size at runtime, you can do so using JavaScript. First, obtain a reference to the canvas element, then set its width and height properties. For example:

javascript
var canvas = document.getElementById('myCanvas');
canvas.width = 500;
canvas.height = 300;

This code retrieves the canvas element with the ID myCanvas using the getElementById method and sets its width to 500 pixels and height to 300 pixels.

Dynamic Adaptation to Screen Size

In certain scenarios, it may be desirable for the canvas to adapt to its container or the browser window size. To achieve this, listen for the window's resize event to dynamically adjust the canvas dimensions. For example:

javascript
window.addEventListener('resize', resizeCanvas, false);

function resizeCanvas() {
    var canvas = document.getElementById('myCanvas');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
}

resizeCanvas(); // Initialize canvas size

This code listens for the window's resize event and dynamically adjusts the canvas size to match the window dimensions when the window size changes.

Summary

Setting the canvas size is typically done directly in HTML using attributes or dynamically adjusted via JavaScript to meet varying requirements. In practical development, selecting the appropriate method based on specific circumstances is crucial. For instance, when building responsive web pages or applications that require changing the canvas size after user interaction, using JavaScript for dynamic adjustment offers greater flexibility and effectiveness.