Canvas resize question

DL · Jan 1, 2009

It seems pretty straight-forward to simply resize a canvas, code like
thie following would do:
var c = document.getElementById('canvas');
c.height = c.height + 15;
c.width = c.width + 15;

However, this resized canvas would appear empty.

How does it work? Could I create a hidden element, a) upon the resize
event trigger a copy of the canvas element to the hidden element; b)
then do the canvas resizing and c) then copy it/them back to the
canvas?

And if the above approach is the right way?
Step one seems critical,
// a) copy the original canvas content to the temp element named
canvastemp
var canvastemp = document.getElementById("canvastemp");
var ctemp = canvastemp.getContext("2d");
// duplicate the temp object from the original canvas object
canvastemp = c;

Not working, what's wrong?

Thanks.

Trevor Lawrence · Jan 1, 2009

DL said:
It seems pretty straight-forward to simply resize a canvas, code like
thie following would do:
var c = document.getElementById('canvas');
c.height = c.height + 15;
c.width = c.width + 15;

However, this resized canvas would appear empty.

How does it work? Could I create a hidden element, a) upon the resize
event trigger a copy of the canvas element to the hidden element; b)
then do the canvas resizing and c) then copy it/them back to the
canvas?

And if the above approach is the right way?
Step one seems critical,
// a) copy the original canvas content to the temp element named
canvastemp
var canvastemp = document.getElementById("canvastemp");
var ctemp = canvastemp.getContext("2d");
// duplicate the temp object from the original canvas object
canvastemp = c;

Not working, what's wrong?

I have been trying similar things where I have a <div> into which I place an
image. I resize both the image and the <div>. I am making a few errors along
the way, but generally, it seems to be working fairly well.

It may help to know what the element is which has id='canvas'.

Is it a <div> as in my case?
Or is it an <img>?
Does it contain something to start with ?

Seeing the rest of the code (e.g. the HTML that has id='canvas') may also
help

DL · Jan 2, 2009

I have been trying similar things where I have a <div> into which I placean
image. I resize both the image and the <div>. I am making a few errors along
the way, but generally, it seems to be working fairly well.

It may help to know what the element is which has id='canvas'.

Is it a <div> as in my case?
Or is it an <img>?
Does it contain something to start with ?

Seeing the rest of the code (e.g. the HTML that has id='canvas') may also
help
--
Trevor Lawrence
Canberra
Web Sitehttp://trevorl.mvps.org- Hide quoted text -

- Show quoted text -

That's encouraging.

The HTML part looks like this:
....
<body>
<canvas width="300" height="300" style="border:1px solid black;"
id="canvas"></canvas>
<input type="hidden" id="canvastemp"> <br/>
<input type="button" id="canvasResize" onclick="canvasResize();"
value=" + ">
....

The js part looks like this:
function canvasResize() {
var can = document.getElementById('canvas');
// a) copy canvas to temp
var canvastemp = document.getElementById("canvastemp");
var ctemp = canvastemp.getContext("2d");

// duplicate content
canvastemp = can;

// b) resize canvas
can.height = can.height + 15;
can.width = can.width + 15;

// c) copy back canvas content
can = canvastemp;
cxt = can.getContext("2d");
cxt.style.display = "block";

}

Or another way around, how does yours work?

Many thanks.

Issue with key down - JS	3	Nov 25, 2020
Canvas drawing HTML Javascript on elementor	1	Feb 22, 2023
I Need Help with making a function that draws in a canvas using location data.	1	Dec 17, 2021
Canvas question	2	Feb 14, 2011
My sliding panel in React Js with graphs on it renders nothing but a blank screen--need help	0	Dec 9, 2019
canvas/drawing api event listener	4	Feb 15, 2011
I need help making a zooming function	11	Dec 14, 2021
CSS has bigger pixels than canvas?	7	Oct 20, 2008

Canvas resize question

DL

Trevor Lawrence

DL

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads