Canvas image is not the same size as the canvas or orginal image
Question
I've put a canvas on top a background image. When I press the 'Try It' button the image appears in the canvas but it does not appear the same size as the parent or fit in the canvas. I only see the top left of the image.
The parent image and the canvas are the same size.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="bg">
<img src="Assets/Images/background.png" alt="background">
</div>
<section class="content">
<p>Image to use:</p>
<img id="taxi" src="Assets/Images/PV.png" width="250" height="300">
<p>Canvas to fill:</p>
<canvas id="myCanvas" width="250" height="300"
style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<p><button onclick="myCanvas()">Try it</button></p>
</section>
</body>
</html>
JS
function myCanvas() {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("taxi");
ctx.drawImage(img,10,10);
}
How do I get it so that the image in the canvas is the same size as the parent? Also, how do I get the image to disappear from the canvas when I press 'Try It' on the second press?
1 answers
solution1
1 ACCPTED 2019-02-07 11:58:55
I had the same issue and had to learn the hard way. Responsive Canvas and same same aspect Ratio Canvas is not as easy as one would hope.
What you need to do:
function myCanvas() {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("taxi");
ctx.drawImage(img,10,10, 250, 300);
}
Let me explain why.
In your HTML, you have manually declared:
width="250" height="300"
So the image projected on the Canvas needs to be the same size. It is all controlled by the ctx.drawImage(img,10,10, 250, 300) function.
The first argument to the fn is the referenced data, this can be a video, image etc.
The second arguments is the X axis offset, the third argument is the Y axys offset(If you want no offset, just pass : ctx.drawImage(img,0,0, 250, 300);.
In this case, the 4th and 5th arguments are the size of the what was passed as first argument.
Here is a codepen, try changing the arguments and see what happens.
https://codepen.io/pen/?editors=1010
PS, you can pass many many more arguments to this method, but usually, this is all you need.
Just wanted to add, you can increase a smaller image to fit a Canvas, and the other way around, but if you declare the size of the Canvas with HTML attributes, and use smaller numbers in the drawImage fn, it will not fill the canvas. The HTML seems to have more specifity. This can be good or bad, but it is important to know.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.