HTML/Javascript Canvas drawImg Function
up vote
0
down vote
favorite
I am trying to mirror a section of an image, into a below canvas, of exactly the same size, based on fixed values. For example, present it a picture of a map, and mirror below in the same position and the same size a building on that original map image. However, for some unknown reason, it resizes the mirrored section every time? The only botch fix for this is to apply a multiplier to all "d" variables in the draw image function, as seen here: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage
Any ideas as to why this is?
Code (minus the multiplier, multipler avaliable if needed):
<!DOCTYPE html>
<html>
<body>
<img id="scream" src="image1.jpg" alt="The Scream" width="100%" height="100%">
<!--<canvas id="myCanvas" style="border:1px solid #d3d3d3;">-->
Your browser does not support the HTML5 canvas tag.
<script>
document.getElementById("scream").onload = function()
var c = document.createElement('canvas');
var imgData = document.getElementById("scream");
c.width = imgData.width;
c.height = imgData.height;
var body = document.getElementsByTagName("body")[0];
body.appendChild(c);
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
console.log(img);
//ctx.drawImage(img, 0, 0);
//ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
ctx.drawImage(img, 200, 200, 100, 143, 200, 200, 100*1.87, 143*1.87);
//console.log(ctx);
;
</script>
<p><strong>Note:</strong> The canvas tag is not supported in Internet
Explorer 8 and earlier versions.</p>
</body>
</html>
javascript html html5-canvas
asked 2 days ago
T.Davidson
125
add a comment |
up vote
0
down vote
favorite
I am trying to mirror a section of an image, into a below canvas, of exactly the same size, based on fixed values. For example, present it a picture of a map, and mirror below in the same position and the same size a building on that original map image. However, for some unknown reason, it resizes the mirrored section every time? The only botch fix for this is to apply a multiplier to all "d" variables in the draw image function, as seen here: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage
Any ideas as to why this is?
Code (minus the multiplier, multipler avaliable if needed):
<!DOCTYPE html>
<html>
<body>
<img id="scream" src="image1.jpg" alt="The Scream" width="100%" height="100%">
<!--<canvas id="myCanvas" style="border:1px solid #d3d3d3;">-->
Your browser does not support the HTML5 canvas tag.
<script>
document.getElementById("scream").onload = function()
var c = document.createElement('canvas');
var imgData = document.getElementById("scream");
c.width = imgData.width;
c.height = imgData.height;
var body = document.getElementsByTagName("body")[0];
body.appendChild(c);
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
console.log(img);
//ctx.drawImage(img, 0, 0);
//ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
ctx.drawImage(img, 200, 200, 100, 143, 200, 200, 100*1.87, 143*1.87);
//console.log(ctx);
;
</script>
<p><strong>Note:</strong> The canvas tag is not supported in Internet
Explorer 8 and earlier versions.</p>
</body>
</html>
javascript html html5-canvas
asked 2 days ago
T.Davidson
125
1
Try removingwidth="100%" height="100%"from the image, so it is shown at original size. Right now the browser probably scales up the image, but the copy you draw on the canvas uses the original pixels. If you want the copy to be scaled up, too, you need to calculate the scale factor dynamically by dividing the scaled up width by the image's original width.
– Chris G
2 days ago
Or simply useimg.naturalWidth/img.naturalHeight
– Kaiido
2 days ago
@ChrisG this worked first time! Thank you, I was stupidly thinking these were ensuring image displayed at full size but in reality was setting it to viewport height/width - if you add it as an answer I will confirm?
– T.Davidson
2 days ago
@Kaiido This worked too - thank you!
– T.Davidson
2 days ago
@ChrisG, I fail to find a correct dupe, you might want to provide an answer (you were right the browser will convert the % value to the computed px one, while drawImage use natural sizes)
– Kaiido
2 days ago
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
I am trying to mirror a section of an image, into a below canvas, of exactly the same size, based on fixed values. For example, present it a picture of a map, and mirror below in the same position and the same size a building on that original map image. However, for some unknown reason, it resizes the mirrored section every time? The only botch fix for this is to apply a multiplier to all "d" variables in the draw image function, as seen here: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage
Any ideas as to why this is?
Code (minus the multiplier, multipler avaliable if needed):
<!DOCTYPE html>
<html>
<body>
<img id="scream" src="image1.jpg" alt="The Scream" width="100%" height="100%">
<!--<canvas id="myCanvas" style="border:1px solid #d3d3d3;">-->
Your browser does not support the HTML5 canvas tag.
<script>
document.getElementById("scream").onload = function()
var c = document.createElement('canvas');
var imgData = document.getElementById("scream");
c.width = imgData.width;
c.height = imgData.height;
var body = document.getElementsByTagName("body")[0];
body.appendChild(c);
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
console.log(img);
//ctx.drawImage(img, 0, 0);
//ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
ctx.drawImage(img, 200, 200, 100, 143, 200, 200, 100*1.87, 143*1.87);
//console.log(ctx);
;
</script>
<p><strong>Note:</strong> The canvas tag is not supported in Internet
Explorer 8 and earlier versions.</p>
</body>
</html>
javascript html html5-canvas
asked 2 days ago
T.Davidson
125
I am trying to mirror a section of an image, into a below canvas, of exactly the same size, based on fixed values. For example, present it a picture of a map, and mirror below in the same position and the same size a building on that original map image. However, for some unknown reason, it resizes the mirrored section every time? The only botch fix for this is to apply a multiplier to all "d" variables in the draw image function, as seen here: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage
Any ideas as to why this is?
Code (minus the multiplier, multipler avaliable if needed):
<!DOCTYPE html>
<html>
<body>
<img id="scream" src="image1.jpg" alt="The Scream" width="100%" height="100%">
<!--<canvas id="myCanvas" style="border:1px solid #d3d3d3;">-->
Your browser does not support the HTML5 canvas tag.
<script>
document.getElementById("scream").onload = function()
var c = document.createElement('canvas');
var imgData = document.getElementById("scream");
c.width = imgData.width;
c.height = imgData.height;
var body = document.getElementsByTagName("body")[0];
body.appendChild(c);
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
console.log(img);
//ctx.drawImage(img, 0, 0);
//ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
ctx.drawImage(img, 200, 200, 100, 143, 200, 200, 100*1.87, 143*1.87);
//console.log(ctx);
;
</script>
<p><strong>Note:</strong> The canvas tag is not supported in Internet
Explorer 8 and earlier versions.</p>
</body>
</html>
javascript html html5-canvas
javascript html html5-canvas
asked 2 days ago
T.Davidson
125
asked 2 days ago
T.Davidson
125
asked 2 days ago
T.Davidson
125
asked 2 days ago
T.Davidson
125
asked 2 days ago
T.Davidson
125
125
1
Try removingwidth="100%" height="100%"from the image, so it is shown at original size. Right now the browser probably scales up the image, but the copy you draw on the canvas uses the original pixels. If you want the copy to be scaled up, too, you need to calculate the scale factor dynamically by dividing the scaled up width by the image's original width.
– Chris G
2 days ago
Or simply useimg.naturalWidth/img.naturalHeight
– Kaiido
2 days ago
@ChrisG this worked first time! Thank you, I was stupidly thinking these were ensuring image displayed at full size but in reality was setting it to viewport height/width - if you add it as an answer I will confirm?
– T.Davidson
2 days ago
@Kaiido This worked too - thank you!
– T.Davidson
2 days ago
@ChrisG, I fail to find a correct dupe, you might want to provide an answer (you were right the browser will convert the % value to the computed px one, while drawImage use natural sizes)
– Kaiido
2 days ago
add a comment |
1
Try removingwidth="100%" height="100%"from the image, so it is shown at original size. Right now the browser probably scales up the image, but the copy you draw on the canvas uses the original pixels. If you want the copy to be scaled up, too, you need to calculate the scale factor dynamically by dividing the scaled up width by the image's original width.
– Chris G
2 days ago
Or simply useimg.naturalWidth/img.naturalHeight
– Kaiido
2 days ago
@ChrisG this worked first time! Thank you, I was stupidly thinking these were ensuring image displayed at full size but in reality was setting it to viewport height/width - if you add it as an answer I will confirm?
– T.Davidson
2 days ago
@Kaiido This worked too - thank you!
– T.Davidson
2 days ago
@ChrisG, I fail to find a correct dupe, you might want to provide an answer (you were right the browser will convert the % value to the computed px one, while drawImage use natural sizes)
– Kaiido
2 days ago
1
1
Try removing
width="100%" height="100%" from the image, so it is shown at original size. Right now the browser probably scales up the image, but the copy you draw on the canvas uses the original pixels. If you want the copy to be scaled up, too, you need to calculate the scale factor dynamically by dividing the scaled up width by the image's original width.– Chris G
2 days ago
Try removing
width="100%" height="100%" from the image, so it is shown at original size. Right now the browser probably scales up the image, but the copy you draw on the canvas uses the original pixels. If you want the copy to be scaled up, too, you need to calculate the scale factor dynamically by dividing the scaled up width by the image's original width.– Chris G
2 days ago
Or simply use
img.naturalWidth/img.naturalHeight– Kaiido
2 days ago
Or simply use
img.naturalWidth/img.naturalHeight– Kaiido
2 days ago
@ChrisG this worked first time! Thank you, I was stupidly thinking these were ensuring image displayed at full size but in reality was setting it to viewport height/width - if you add it as an answer I will confirm?
– T.Davidson
2 days ago
@ChrisG this worked first time! Thank you, I was stupidly thinking these were ensuring image displayed at full size but in reality was setting it to viewport height/width - if you add it as an answer I will confirm?
– T.Davidson
2 days ago
@Kaiido This worked too - thank you!
– T.Davidson
2 days ago
@Kaiido This worked too - thank you!
– T.Davidson
2 days ago
@ChrisG, I fail to find a correct dupe, you might want to provide an answer (you were right the browser will convert the % value to the computed px one, while drawImage use natural sizes)
– Kaiido
2 days ago
@ChrisG, I fail to find a correct dupe, you might want to provide an answer (you were right the browser will convert the % value to the computed px one, while drawImage use natural sizes)
– Kaiido
2 days ago
add a comment |
1 Answer
1
active
oldest
votes
up vote
0
down vote
In order to mirror the image you need to translate the context ctx.translate(0, this.height) and then scale it ctx.scale(1,-1);. However on resize the canvas will stay the initial size while the image will adapt to the window size. If you need the canvas to adapt as well you will need to recalculate everything on resize.
var imgData = document.getElementById("scream");
imgData.onload = function()
var c = document.createElement('canvas');
c.width = this.width;
c.height = this.height;
var body = document.getElementsByTagName("body")[0];
body.appendChild(c);
var ctx = c.getContext("2d");
ctx.translate(0, this.height);
ctx.scale(1,-1);
ctx.drawImage(this, 0, 0,this.width,this.height);
;<img id="scream" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/imgres.jpg" alt="The Scream" width="100%" height="100%">Next comes an example where the canvas size changes on resize. In this case you need to move all the code that draws the image inside a function to be called on resize.
Quote from MDN:
Since resize events can fire at a high rate, the event handler shouldn't execute computationally expensive operations such as DOM modifications. Instead, it is recommended to throttle the event using requestAnimationFrame, setTimeout or customEvent"
window.onload = function()
var imgData = document.getElementById("scream");
var c = document.createElement("canvas");
var body = document.getElementsByTagName("body")[0];
body.appendChild(c);
var ctx = c.getContext("2d");
imgData.onload = function()
init();
;
function init()
c.width = imgData.width;
c.height = imgData.height;
ctx.translate(0, imgData.height);
ctx.scale(1, -1);
ctx.drawImage(imgData, 0, 0, imgData.width, imgData.height);
setTimeout(function()
init();
addEventListener("resize", init, false);
, 15);
;<img id="scream" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/imgres.jpg" alt="The Scream" width="100%" height="100%">answered 2 days ago
enxaneta
3,4221412
I haven't looked up ctx.translate but I will do if it means the layout will be responsive. Cheers.
– T.Davidson
2 days ago
1
I think you got confused by the use of the word "mirror" here. They are not trying to apply a scale(-1,0) a.k.a "mirror effect", but to mirror the image in an other place, i.e, to clone it somewhere else.
– Kaiido
2 days ago
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
In order to mirror the image you need to translate the context ctx.translate(0, this.height) and then scale it ctx.scale(1,-1);. However on resize the canvas will stay the initial size while the image will adapt to the window size. If you need the canvas to adapt as well you will need to recalculate everything on resize.
var imgData = document.getElementById("scream");
imgData.onload = function()
var c = document.createElement('canvas');
c.width = this.width;
c.height = this.height;
var body = document.getElementsByTagName("body")[0];
body.appendChild(c);
var ctx = c.getContext("2d");
ctx.translate(0, this.height);
ctx.scale(1,-1);
ctx.drawImage(this, 0, 0,this.width,this.height);
;<img id="scream" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/imgres.jpg" alt="The Scream" width="100%" height="100%">Next comes an example where the canvas size changes on resize. In this case you need to move all the code that draws the image inside a function to be called on resize.
Quote from MDN:
Since resize events can fire at a high rate, the event handler shouldn't execute computationally expensive operations such as DOM modifications. Instead, it is recommended to throttle the event using requestAnimationFrame, setTimeout or customEvent"
window.onload = function()
var imgData = document.getElementById("scream");
var c = document.createElement("canvas");
var body = document.getElementsByTagName("body")[0];
body.appendChild(c);
var ctx = c.getContext("2d");
imgData.onload = function()
init();
;
function init()
c.width = imgData.width;
c.height = imgData.height;
ctx.translate(0, imgData.height);
ctx.scale(1, -1);
ctx.drawImage(imgData, 0, 0, imgData.width, imgData.height);
setTimeout(function()
init();
addEventListener("resize", init, false);
, 15);
;<img id="scream" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/imgres.jpg" alt="The Scream" width="100%" height="100%">answered 2 days ago
enxaneta
3,4221412
I haven't looked up ctx.translate but I will do if it means the layout will be responsive. Cheers.
– T.Davidson
2 days ago
1
I think you got confused by the use of the word "mirror" here. They are not trying to apply a scale(-1,0) a.k.a "mirror effect", but to mirror the image in an other place, i.e, to clone it somewhere else.
– Kaiido
2 days ago
add a comment |
up vote
0
down vote
In order to mirror the image you need to translate the context ctx.translate(0, this.height) and then scale it ctx.scale(1,-1);. However on resize the canvas will stay the initial size while the image will adapt to the window size. If you need the canvas to adapt as well you will need to recalculate everything on resize.
var imgData = document.getElementById("scream");
imgData.onload = function()
var c = document.createElement('canvas');
c.width = this.width;
c.height = this.height;
var body = document.getElementsByTagName("body")[0];
body.appendChild(c);
var ctx = c.getContext("2d");
ctx.translate(0, this.height);
ctx.scale(1,-1);
ctx.drawImage(this, 0, 0,this.width,this.height);
;<img id="scream" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/imgres.jpg" alt="The Scream" width="100%" height="100%">Next comes an example where the canvas size changes on resize. In this case you need to move all the code that draws the image inside a function to be called on resize.
Quote from MDN:
Since resize events can fire at a high rate, the event handler shouldn't execute computationally expensive operations such as DOM modifications. Instead, it is recommended to throttle the event using requestAnimationFrame, setTimeout or customEvent"
window.onload = function()
var imgData = document.getElementById("scream");
var c = document.createElement("canvas");
var body = document.getElementsByTagName("body")[0];
body.appendChild(c);
var ctx = c.getContext("2d");
imgData.onload = function()
init();
;
function init()
c.width = imgData.width;
c.height = imgData.height;
ctx.translate(0, imgData.height);
ctx.scale(1, -1);
ctx.drawImage(imgData, 0, 0, imgData.width, imgData.height);
setTimeout(function()
init();
addEventListener("resize", init, false);
, 15);
;<img id="scream" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/imgres.jpg" alt="The Scream" width="100%" height="100%">answered 2 days ago
enxaneta
3,4221412
I haven't looked up ctx.translate but I will do if it means the layout will be responsive. Cheers.
– T.Davidson
2 days ago
1
I think you got confused by the use of the word "mirror" here. They are not trying to apply a scale(-1,0) a.k.a "mirror effect", but to mirror the image in an other place, i.e, to clone it somewhere else.
– Kaiido
2 days ago
add a comment |
up vote
0
down vote
up vote
0
down vote
In order to mirror the image you need to translate the context ctx.translate(0, this.height) and then scale it ctx.scale(1,-1);. However on resize the canvas will stay the initial size while the image will adapt to the window size. If you need the canvas to adapt as well you will need to recalculate everything on resize.
var imgData = document.getElementById("scream");
imgData.onload = function()
var c = document.createElement('canvas');
c.width = this.width;
c.height = this.height;
var body = document.getElementsByTagName("body")[0];
body.appendChild(c);
var ctx = c.getContext("2d");
ctx.translate(0, this.height);
ctx.scale(1,-1);
ctx.drawImage(this, 0, 0,this.width,this.height);
;<img id="scream" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/imgres.jpg" alt="The Scream" width="100%" height="100%">Next comes an example where the canvas size changes on resize. In this case you need to move all the code that draws the image inside a function to be called on resize.
Quote from MDN:
Since resize events can fire at a high rate, the event handler shouldn't execute computationally expensive operations such as DOM modifications. Instead, it is recommended to throttle the event using requestAnimationFrame, setTimeout or customEvent"
window.onload = function()
var imgData = document.getElementById("scream");
var c = document.createElement("canvas");
var body = document.getElementsByTagName("body")[0];
body.appendChild(c);
var ctx = c.getContext("2d");
imgData.onload = function()
init();
;
function init()
c.width = imgData.width;
c.height = imgData.height;
ctx.translate(0, imgData.height);
ctx.scale(1, -1);
ctx.drawImage(imgData, 0, 0, imgData.width, imgData.height);
setTimeout(function()
init();
addEventListener("resize", init, false);
, 15);
;<img id="scream" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/imgres.jpg" alt="The Scream" width="100%" height="100%">answered 2 days ago
enxaneta
3,4221412
In order to mirror the image you need to translate the context ctx.translate(0, this.height) and then scale it ctx.scale(1,-1);. However on resize the canvas will stay the initial size while the image will adapt to the window size. If you need the canvas to adapt as well you will need to recalculate everything on resize.
var imgData = document.getElementById("scream");
imgData.onload = function()
var c = document.createElement('canvas');
c.width = this.width;
c.height = this.height;
var body = document.getElementsByTagName("body")[0];
body.appendChild(c);
var ctx = c.getContext("2d");
ctx.translate(0, this.height);
ctx.scale(1,-1);
ctx.drawImage(this, 0, 0,this.width,this.height);
;<img id="scream" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/imgres.jpg" alt="The Scream" width="100%" height="100%">Next comes an example where the canvas size changes on resize. In this case you need to move all the code that draws the image inside a function to be called on resize.
Quote from MDN:
Since resize events can fire at a high rate, the event handler shouldn't execute computationally expensive operations such as DOM modifications. Instead, it is recommended to throttle the event using requestAnimationFrame, setTimeout or customEvent"
window.onload = function()
var imgData = document.getElementById("scream");
var c = document.createElement("canvas");
var body = document.getElementsByTagName("body")[0];
body.appendChild(c);
var ctx = c.getContext("2d");
imgData.onload = function()
init();
;
function init()
c.width = imgData.width;
c.height = imgData.height;
ctx.translate(0, imgData.height);
ctx.scale(1, -1);
ctx.drawImage(imgData, 0, 0, imgData.width, imgData.height);
setTimeout(function()
init();
addEventListener("resize", init, false);
, 15);
;<img id="scream" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/imgres.jpg" alt="The Scream" width="100%" height="100%">var imgData = document.getElementById("scream");
imgData.onload = function()
var c = document.createElement('canvas');
c.width = this.width;
c.height = this.height;
var body = document.getElementsByTagName("body")[0];
body.appendChild(c);
var ctx = c.getContext("2d");
ctx.translate(0, this.height);
ctx.scale(1,-1);
ctx.drawImage(this, 0, 0,this.width,this.height);
;<img id="scream" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/imgres.jpg" alt="The Scream" width="100%" height="100%">var imgData = document.getElementById("scream");
imgData.onload = function()
var c = document.createElement('canvas');
c.width = this.width;
c.height = this.height;
var body = document.getElementsByTagName("body")[0];
body.appendChild(c);
var ctx = c.getContext("2d");
ctx.translate(0, this.height);
ctx.scale(1,-1);
ctx.drawImage(this, 0, 0,this.width,this.height);
;<img id="scream" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/imgres.jpg" alt="The Scream" width="100%" height="100%">window.onload = function()
var imgData = document.getElementById("scream");
var c = document.createElement("canvas");
var body = document.getElementsByTagName("body")[0];
body.appendChild(c);
var ctx = c.getContext("2d");
imgData.onload = function()
init();
;
function init()
c.width = imgData.width;
c.height = imgData.height;
ctx.translate(0, imgData.height);
ctx.scale(1, -1);
ctx.drawImage(imgData, 0, 0, imgData.width, imgData.height);
setTimeout(function()
init();
addEventListener("resize", init, false);
, 15);
;<img id="scream" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/imgres.jpg" alt="The Scream" width="100%" height="100%">window.onload = function()
var imgData = document.getElementById("scream");
var c = document.createElement("canvas");
var body = document.getElementsByTagName("body")[0];
body.appendChild(c);
var ctx = c.getContext("2d");
imgData.onload = function()
init();
;
function init()
c.width = imgData.width;
c.height = imgData.height;
ctx.translate(0, imgData.height);
ctx.scale(1, -1);
ctx.drawImage(imgData, 0, 0, imgData.width, imgData.height);
setTimeout(function()
init();
addEventListener("resize", init, false);
, 15);
;<img id="scream" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/imgres.jpg" alt="The Scream" width="100%" height="100%">answered 2 days ago
enxaneta
3,4221412
edited 2 days ago
answered 2 days ago
enxaneta
3,4221412
answered 2 days ago
enxaneta
3,4221412
answered 2 days ago
enxaneta
3,4221412
3,4221412
I haven't looked up ctx.translate but I will do if it means the layout will be responsive. Cheers.
– T.Davidson
2 days ago
1
I think you got confused by the use of the word "mirror" here. They are not trying to apply a scale(-1,0) a.k.a "mirror effect", but to mirror the image in an other place, i.e, to clone it somewhere else.
– Kaiido
2 days ago
add a comment |
I haven't looked up ctx.translate but I will do if it means the layout will be responsive. Cheers.
– T.Davidson
2 days ago
1
I think you got confused by the use of the word "mirror" here. They are not trying to apply a scale(-1,0) a.k.a "mirror effect", but to mirror the image in an other place, i.e, to clone it somewhere else.
– Kaiido
2 days ago
I haven't looked up ctx.translate but I will do if it means the layout will be responsive. Cheers.
– T.Davidson
2 days ago
I haven't looked up ctx.translate but I will do if it means the layout will be responsive. Cheers.
– T.Davidson
2 days ago
1
1
I think you got confused by the use of the word "mirror" here. They are not trying to apply a scale(-1,0) a.k.a "mirror effect", but to mirror the image in an other place, i.e, to clone it somewhere else.
– Kaiido
2 days ago
I think you got confused by the use of the word "mirror" here. They are not trying to apply a scale(-1,0) a.k.a "mirror effect", but to mirror the image in an other place, i.e, to clone it somewhere else.
– Kaiido
2 days ago
add a comment |
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53225222%2fhtml-javascript-canvas-drawimg-function%23new-answer', 'question_page');
);
Post as a guest
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
1
Try removing
width="100%" height="100%"from the image, so it is shown at original size. Right now the browser probably scales up the image, but the copy you draw on the canvas uses the original pixels. If you want the copy to be scaled up, too, you need to calculate the scale factor dynamically by dividing the scaled up width by the image's original width.– Chris G
2 days ago
Or simply use
img.naturalWidth/img.naturalHeight– Kaiido
2 days ago
@ChrisG this worked first time! Thank you, I was stupidly thinking these were ensuring image displayed at full size but in reality was setting it to viewport height/width - if you add it as an answer I will confirm?
– T.Davidson
2 days ago
@Kaiido This worked too - thank you!
– T.Davidson
2 days ago
@ChrisG, I fail to find a correct dupe, you might want to provide an answer (you were right the browser will convert the % value to the computed px one, while drawImage use natural sizes)
– Kaiido
2 days ago