hi i am trying to draw image with a button in canvas. But i can not draw in the clear canvas. so;
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Başlıksız Belge</title>
</head>
<body>
<input type="button" id="b1" value="ciz">
<canvas id="canvas" height="300" width="600" style="border: solid;background-color: brown; " >Eski Sürüm Tarayıcı . </canvas>
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var b1 =document.getElementById("b1");
var image = new Image(60, 45); // using optional size for image
var kontrol;
image.src = '/pika.png'; //it is in my pc
image.onload = function(){ // i don't want draw the image on load
kontrol=true;}
b1.onclick=function(){ // i want draw with button
if(kontrol=true){
ctx.drawImage(image, 0, 0);
}
}
</script>
</body>
</html>
when i try with image on load function it is working but i want draw with the button
No problem i get it. thanks...
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var b1 =document.getElementById("b1");
var image = new Image(60, 45);
b1.onclick=function(){
image.src = 'https://i.hizliresim.com/nWdGrR.png';
image.onload = function(){
ctx.drawImage(image, 0, 0);
}
}
If pika.png is located in same directory as your html file then just remove the forward slash before your image's name: image.src = 'pika.png';
Related
I am trying to load an image of me on my html canvas.....
The image is in the right folder...... I just get a weird error (as shown above) im not sure what is going on if you know please let me know.
Here is the code:
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="800" height="500"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "black";
ctx.fillRect(0,0,800,500)
var img = new Image();
img.src = "science.PNG";
img.onload = function() {
context.drawImage(img, 145, 145);
};
</script>
</body>
</html>
context.drawImage(img, 145, 145);
Try changing 'context' to 'ctx'.
I have a canvas element, context 2d, and a list of image sources I want to be able to switch between. Currently, the only image that draws is the image that is already loaded in the html, with the other images simply not drawing to canvas, BUT when I console.log the image will show the image object, but it still doesn't draw. I also drew a test rectangle previously to make sure the canvas is working, and the rectangle drew fine. Here is my code.
Html:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Card Test</title>
</head>
<body>
<canvas class="canvas" height="700" width="700" style="background-color: #3e3e3e"></canvas>
</body>
<img width="100" height="200" src="/Users/Charlie 1/Desktop/Coding/Webpage Projects/TestWithCards/PNG/3C.png">
<script type="text/javascript" src="draw.js"></script>
</html>
Javascript (draw.js):
const canvas = document.querySelector(".canvas");
var imageObj = new Image();
const ctx = canvas.getContext("2d");
const images = [
'/Users/Charlie 1/Desktop/Coding/Webpage Projects/TestWithCards/PNG/2C.png',
'/Users/Charlie 1/Desktop/Coding/Webpage Projects/TestWithCards/PNG/3C.png',
'/Users/Charlie 1/Desktop/Coding/Webpage Projects/TestWithCards/PNG/4C.png',
'/Users/Charlie 1/Desktop/Coding/Webpage Projects/TestWithCards/PNG/5C.png',
'/Users/Charlie 1/Desktop/Coding/Webpage Projects/TestWithCards/PNG/6C.png',
'/Users/Charlie 1/Desktop/Coding/Webpage Projects/TestWithCards/PNG/7C.png'
];
window.onload = function() {
console.log('test1');
imageObj.width = 100;
imageObj.height = 200;
imageObj.src = images[4]; // EX. Only images[1] will load because I have it loaded in the html
console.log(imageObj);
ctx.drawImage(imageObj, 50, 50);
console.log('test2');
}
Wait for the image to load with an event listener before you try to draw it on the canvas.
const images = [
'https://picsum.photos/100/200?random=1',
'https://picsum.photos/100/200?random=2',
'https://picsum.photos/100/200?random=3',
'https://picsum.photos/100/200?random=4',
'https://picsum.photos/100/200?random=5',
];
var imageObj = new Image();
imageObj.width = 100;
imageObj.height = 200;
imageObj.src = images[4];
imageObj.addEventListener("load", () => {
const canvas = document.querySelector(".canvas");
const ctx = canvas.getContext("2d");
ctx.drawImage(imageObj, 50, 50);
});
canvas {
background-color: #3e3e3e;
}
<canvas class="canvas" height="700" width="700"></canvas>
I am trying to draw an image on a canvas, in HTML5. For some reason, the image simply isn't drawn onto the canvas, and there are no errors in the console. Here is my code:
<!DOCTYPE html>
<html>
<body>
<img id="image" src="Images/player.png"></img>
<canvas id="canvas" width="1000" height="750"></canvas>
<script>
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var image = document.getElementById("image");
context.fillStyle = "lightblue";
context.fillRect(0, 0, 1000, 750);
context.drawImage(image, 0, 0);
</script>
</body>
</html>
Can somebody help? Thanks.
You need to add an event listener to the img tag called load. Then in the callback you can call drawImage with the provided img element.
You can do something like this - I have added one stackoverflow image for representation:
const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");
const image = document.getElementById("image");
context.fillStyle = "lightblue";
context.fillRect(0, 0, 1000, 750);
image.addEventListener('load', e => context.drawImage(image, 0, 0));
<img id="image" src="https://stackoverflow.blog/wp-content/themes/stackoverflow-oct-19/images2/header-podcast.svg" height="100px"></img>
<canvas id="canvas" width="1000" height="750"></canvas>
From the documentation: Drawing an image to the canvas
I hope this helps!
I got a problem with converting PNG image to webp format. The background turns black instead of remaining transparent.
How can I fix this?
var img = document.querySelector('#sample');
var webp = document.querySelector('#webp');
img.onload = function() {
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
canvas.width = this.naturalWidth;
canvas.height = this.naturalHeight;
ctx.drawImage(this, 0, 0, this.naturalWidth, this.naturalHeight);
webp.src = canvas.toDataURL('image/webp');
};
img.src = 'data:image/png;base64,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';
<img id="sample">
<img id="webp">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=new Image()
img.src="data:image/png;base64,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";
setTimeout(function(){cxt.drawImage(img,0,0);},2000);
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100"></canvas>
</body>
</html>
this is my test with your picture,so I think there is no problem in your code.
I have this canvas I'm drawing onto. And I want to make image to be placed in the left lower corner.
var canvasWidth = 800;
var canvasHeight = 600;
$("#gameCanvas").attr("width", canvasWidth);
$("#gameCanvas").attr("height", canvasHeight);
var canvas = $("#gameCanvas")[0].getContext("2d");
var image = new Image();
image.src="you.png";
var player1X =0;
var imageHeight=image.height;
var player1Y = canvasHeight - imageHeight;
canvas.rect(0, 0, canvasWidth, canvasHeight);
canvas.fillStyle="#5c7792";
canvas.fill();
$(image).load(function(){
canvas.drawImage(image, player1X , player1Y);
});
but the problem is that when I use variable player1Y, it results in image being displayed at coordinates (0, canvasHeight). Actually, it results in image not being shown. But when I write canvas.drawImage(image, player1X, canvasHeight - image.height) it works perfectly.
How do I make the variable to control the posiotion of image?
Here is JSfiddle: http://jsfiddle.net/u9Ehs/10/
The problem is that the image hasn't fully loaded when you are setting imageHeight & player1Y.
Refactor your code to set all image related variables inside image.onload:
Example code and a Demo: http://jsfiddle.net/m1erickson/CSQGh/
<!doctype html>
<html>
<head>
<style>
body{ background-color: ivory; }
canvas{border:1px solid red;}
</style>
<script>
window.onload = function() {
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var player1X=0;
var player1Y;
var img=new Image();
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/ship.png";
function start(){
player1Y=canvas.height-img.height;
ctx.drawImage(img,player1X,player1Y);
}
}; // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>