Draw image with button - javascript

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

my image wont load..... "image not found" any ideas why?

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'.

Why won't my image draw to canvas unless there is an instance of the image in the html?

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>

Image is not drawing on canvas (HTML5)

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!

Transparent background turns black after converting into webp format via HTML5 canvas

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.

Image width in canvas isnt being displayed correctly

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>

Categories

Resources