I am trying to make a preview checkout, where you can preview an item, with custom text over the image, but I can't even get the image or text to show. Here is my code I have so far...
<html>
<head>
<script>
window.onload = function(){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var imageObj = new Image();
imageObj.onload = function(){
context.drawImage(imageObj, 10, 10);
context.font = "12pt Arial";
context.fillText("My TEXT!", 20, 20);
};
imageObj.src = "http://images.google.com/intl/en_ALL/images/srpr/logo11w.png";
};
</script>
</head>
<body>
<div id="myCanvas"></div>
</body>
</html>
You have to have canvas tag instead of div and give it height and width
<canvas id="myCanvas" width="578" height="400"></canvas>
Related
I wanted to know how do I put text on top of the image which is in the canvas. The image needs to be in the canvas since it is part of my game (Breakout). I get some text but it goes behind the image which is annoying.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Breakout</title>
</head>
<body bgcolor="#4d0000">
<p align="center">
<canvas id="canvas" width="1500" height="800" style="border:1px solid #d3d3d3;"></canvas>
</p>
<script>
window.onload = function(){
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var imageObj = new Image();
imageObj.onload = function(){
context.drawImage(imageObj, 0, 0);
context.font = "40pt Calibri";
context.fillText("BREAKOUT", 625, 100);
};
imageObj.src = 'C:/Users/study/Desktop/Breakout/Images/test3.jpg';
};
</script>
</body>
</html>
There is no problem with the code you tried, it is not visible in the canvas because of the position of the text context.fillText("BREAKOUT", 625, 100);
So, just change the position of the text or increase the image size
This helps you Simulation background-size: cover in canvas
Now you can have your text wherever possible!
<!DOCTYPE html>
<html>
<head>
<title>Breakout</title>
</head>
<body bgcolor="#4d0000">
<p align="center">
<canvas id="canvas" width="1500" height="800" style="border:1px solid #d3d3d3;"></canvas>
</p>
<script>
window.onload = function(){
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var imageObj = new Image();
imageObj.onload = function(){
context.drawImage(imageObj, 0, 0);
context.font = "40pt Calibri";
context.fillText("BREAKOUT", 20, 80, imageObj.width*2, imageObj.height * 2);
};
imageObj.src = 'https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&h=350';
};
</script>
</body>
</html>
Edit
Debug yourself whether the text is displaying before the image is loaded?
So, if you have tried something like this
window.onload = function(){
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.font = "40pt Calibri";
context.fillText("BREAKOUT", 620, 100);
var imageObj = new Image();
imageObj.onload = function(){
context.drawImage(imageObj, 0, 0);
};
imageObj.src = 'C:/Users/study/Desktop/Breakout/Images/test3.jpg';
};
The text won't be displayed! so just change the text position to something like context.fillText("BREAKOUT", 20, 80); and see, the text appears. So There is no problem with the code you have written.
Hope you got the answer to the question.
Thank you.
For my website, I need to redraw an image from server which is continuously updating. I found the solution and tried but it still does not auto refresh. I also tried adding a dummy string to my image(local0.jpg) so that the browser does not use cached image but no success. What am I doing wrong?
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<canvas id="canvas" width="400" height="400"> </canvas>
<script>
var imageObj=new Image();
imageObj.src="local0.jpg?dummy=8484744"
imageObj.onload=function()
{
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
ctx.drawImage(imageObj,0, 0,canvas.width,canvas.height);
setTimeout(timedRefresh,1000);
}
function timedRefresh()
{
imageObj.src = "local0.jpg?dummy=8484749"
}
</script>
</body>
</html>
Try the following code
var imageObj = new Image();
imageObj.onload = function() {
drawOnCanvas();
setTimeout(timedRefresh, 1000);
}
// set src AFTER assigning load
imageObj.src = "local0.jpg?dummy=" + Math.random();
function timedRefresh() {
imageObj.src = "local0.jpg?dummy=" + Math.random();
//drawOnCanvas(); //flicker was due this line as it try to draw image load so i commented it... now it should work...
}
function drawOnCanvas() {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(imageObj, 0, 0, canvas.width, canvas.height);
}
your function timedRefresh add random values to image
function timedRefresh()
{
imageObj.src = "local0.jpg?dummy=" + Math.floor((Math.random() * 10000) + 1);
}
So I'm trying to make this canvas have different types of text on it including colours. Here what I have so far.
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="400" height="200" style=" border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
window.onload = function(){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var imageObj = new Image();
imageObj.onload = function(){
context.drawImage(imageObj, 0, 0);
context.font = "40pt Calibri";
context.fillText("My TEXT!", 50, 100);
};
imageObj.src = "Assets/Background2.png";
};
</script>
</body>
</html>
You just need to use the fillStyle method each time you want to change your font color:
context.fillStyle = 'red';
Use fillStyle before fillText
Check this Fiddle
Why does nothing show up on the canvas? The picture is in the same folder as the code, I've tried to directly copy some code, and just change the sources, it still doesn't work. That leads me to believe, that it is not a fault in the actual way I draw the picture, but in the way I load the canvas?
I can add other stuff to the canvas, just not pictures.
<!DOCTYPE html>
<head></head>
<body>
<script>
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.height = 500;
canvas.width = 800;
document.body.appendChild(canvas);
var imag = new Image();
imag.onload = function() {
context.drawImage(imageObj, 0, 0);
};
imag.src = "underwater.png";
</script>
</body>
You most likely copied this code from somewhere and forgot to change the image object name
<!DOCTYPE html>
<head></head>
<body>
<script>
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.height = 500;
canvas.width = 800;
document.body.appendChild(canvas);
var imag = new Image();
imag.onload = function() {
context.drawImage(imag, 0, 0);
};
imag.src = "underwater.png";
</script>
</body>
I am new to javascript. I am creating new images in my js file by saying
What I intend to is draw a new image and remove the previous one...
My code sample is :
var image = new Image();
image.src = 'abc.png';
ctx.drawImage(image, x, y,30,30);
and then I am using
ctx.clearRect(x, y, 30, 30);
but it does not clear the images drawn..
What should I do?
Thanks in advance
Check this HTML5 canvas tutorial for clear and redraw new image
Hope this can be helpful for you.
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="578" height="400"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var imageObj = new Image();
imageObj.onload = function() {
context.drawImage(imageObj, 69, 50);
};
imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
</script>
</body>
</html>