Breaking News: Grepper is joining You.com. Read the official announcement!

How to set canvas height and width dynamically

Add Answer

xcv answered on July 15, 2022 Popularity 9/10 Helpfulness 1/10

answer How to set canvas height and width dynamically

related js to set height of canvas

related How to set canvas height and width dynamically

How to set canvas height and width dynamically

Comment

var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');

function drawTextAndResize(text, fontSize, font){
  text = text || "hello world";
  fontSize =  fontSize || 48;
  font = font || "serif";
  // First we set the font to the context
  ctx.font = fontSize + 'px '+ font;
  // We set the size of our canvas accordingly to the width of our text
  canvas.width = ctx.measureText(text).width;
  // 1.3*fontSize is an approximation of the line height, for a complete way to get the height, refer to this answer : http://stackoverflow.com/a/17631567/3702797
  canvas.height = fontSize*1.3;
  // Since our context has been reset, we have to reset its font as well
  ctx.font = fontSize + 'px '+ font;
  // Finally we draw the text, approximately vertically centered
  ctx.fillText(text, 0,canvas.height/1.3);
  }

drawTextAndResize("This is some text", 32, "arial");
setTimeout(drawTextAndResize, 4000);

Popularity 9/10 Helpfulness 1/10 Language html

Source: stackoverflow.com

Tags: canvas height html set width

Link to this answer
Share Copy Link

Contributed on Jul 15 2022

xcv

0 Answers Avg Quality 2/10

Closely Related Answers

js to set height of canvas

Comment

-1

let canvas= document.getElementsByTagName('canvas')[0]
canvas.width= window.innerWidth
canvas.height=window.innerHeight

Popularity 9/10 Helpfulness 4/10 Language javascript

Source: Grepper

Tags: canvas ca

Link to this answer
Share Copy Link

Contributed on Apr 06 2023

Anant Tiwari

0 Answers Avg Quality 2/10

How to set canvas height and width dynamically

Comment

const drawComponents = () => {
    	/* Code for drawing on the canvas */
    
    	// Return the animation interval.
    	return setInterval(() => {
    		/* Code for changes to canvas over time. */
    	}, 100);
    };

Popularity 9/10 Helpfulness 1/10 Language javascript

Source: isaiahnixon.com

Tags: canvas ca

Link to this answer
Share Copy Link

Contributed on Jul 15 2022

xcv

0 Answers Avg Quality 2/10

How to set canvas height and width dynamically

Contents

More Related Answers

How to set canvas height and width dynamically

Closely Related Answers

js to set height of canvas

How to set canvas height and width dynamically

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.