Why does the image not display to the canvas in this example?
Code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script>
/*
var lockOrientation = screen.lockOrientation || screen.mozLockOrientation || screen.msLockOrientation;
screen.lockOrientation('landscape');
if (lockOrientation("landscape-primary")) {
screen.lockOrientation('landscape');
}
*/
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var x = 10;
var y = 10;
var width = 470;
var height = 310;
var imageObj = new Image();
imageObj.onload = function() {
context.drawImage(imageObj, x, y, width, height);
};
imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
</script>
</head>
<body>
<canvas id="myCanvas" width="470" height="310" style="border:5px solid #123456;"></canvas>
</body>
</html>
You need to wait for the document to load before trying to select elements in the page.
Try wrapping your code like this:
window.onload = function() {
// your code goes here
};
Related
I can't figure out how to change the format of an image. I'm trying to make the Dino Game from Google Chrome. And changing the image size won't work.
My code:
window.onload = function() {
var cvs = document.getElementById("gameArea");
var ctx = cvs.getContext("2d");
var dino;
var obst = [];
function drawDino() {
var dinoImg = new Image();
dinoImg.src = 'dino.png';
dinoImg.onload = function() {
ctx.drawImage(dinoImg, 0, 0);
this.style.width = 100;
this.style.height = 100;
}
}
function drawObst() {
}
function draw() {
drawDino();
drawObst();
}
function startGame() {
setInterval(draw,50);
}
startGame();
}
Use the parameters of drawImage for resizing the image.
void ctx.drawImage(image, dx, dy, dWidth, dHeight);
window.onload = function() {
var cvs = document.getElementById("gameArea");
var ctx = cvs.getContext("2d");
var dino;
var obst = [];
function drawDino() {
var dinoImg = new Image();
dinoImg.src = 'http://lorempixel.com/400/200/'; //'dino.png';
dinoImg.onload = function() {
ctx.drawImage(dinoImg, 0, 0, 100, 100);
}
}
function drawObst() {
}
function draw() {
drawDino();
drawObst();
}
function startGame() {
setInterval(draw,1000);
}
startGame();
}
<canvas id="gameArea"></canvas>
I believe this is what you are looking for.
You did not pass width & height parameters to drawIamge
ctx.drawImage(dinoImg, x, y, width, height);
Read more at:
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage
window.onload = function() {
var cvs = document.getElementById("gameArea");
var ctx = cvs.getContext("2d");
var dino;
var obst = [];
function drawDino() {
var dinoImg = new Image();
dinoImg.src = 'https://i.imgur.com/HeGEEbu.jpg';
dinoImg.onload = function() {
//ctx.drawImage(dinoImg, 0, 0);
let width = 200;
let height = 200;
ctx.drawImage(dinoImg, 0, 0, width, height);
}
}
function drawObst() {
}
function draw() {
drawDino();
drawObst();
}
function startGame() {
setInterval(draw,50);
}
startGame();
}
#gameArea {
border:1px solid;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<canvas id="gameArea" width="500" height="500"></canvas>
</body>
</html>
I'm trying to make an image repeat, but the image is not appearing at all? I'm not sure what I have done wrong or how to fix this. I was wondering if anyone could help?
<head>
<style type="text/css">
canvas {
background: black;
}
html, body, div, canvas {
margin: 0;
padding: 0;
}
html, body {
overflow: hidden;
}
</style>
</head>
<body>
<canvas id="my_canvas"></canvas>
<script src="/js/all.js"></script>
</body>
JS:
var canvas = null;
var context = null;
setup = function() {
canvas = document.getElementById("my_canvas");
context = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var image = new Image();
image.src = 'http://example.com/tile.png';
var pat = context.createPattern(img, "repeat"); // repeat the image as a pattern
context.fillStyle = pat;
context.rect(0,0,150,100);
context.fill();
};
setup();
You need to wait for the image to load before painting it on the canvas
var image = new Image();
image.src = 'http://example.com/tile.png';
image.onload = function() {
var pat = context.createPattern(img, "repeat"); // repeat the image as a pattern
context.fillStyle = pat;
context.rect(0,0,150,100);
context.fill();
};
I am trying to use class on drawImage function.
But it seems that drawImage function couldn't get the attribute img of variable monster.
I have no idea what would caused this error.
Not quite understand why browser give me the below error code ... please help me.
Uncaught TypeError: Cannot read property 'img' of undefined.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tower Defense</title>
<style>
canvas {
padding: 0;
margin: auto;
display: block;
}
</style>
</head>
<body>
<script>
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 500;
canvas.height = 500;
document.body.appendChild(canvas);
function Monster(img, x = 0, y = 0, w,h) {
this.img = img;
this.x = x;
this.y = y;
this.w = w;
this.h = h;
}
var monster;
var DrawMonster = function(mons) {
ctx.drawImage(mons.img, mons.x, mons.y, mons.w, mons.h);
}
var PreLoadImages = function() {
var img = new Image();
img.addEventListener("load", function() { // or img.onload = function() { ...
monster = new Monster(this, 0, 0, 100, 100);
});
img.src = "res/Mons_Pirate.jpg";
}
PreLoadImages();
DrawMonster(monster);
</script>
</body>
</html>
Please change the link (res/Mons_Pirate.jpg) of image while testing.
DrawImage should be inside the image load function.Instance of Monster is created only inside the Image load function.Image will be loaded in async.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tower Defense</title>
<style>
canvas {
padding: 0;
margin: auto;
display: block;
}
</style>
</head>
<body>
<script>
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 500;
canvas.height = 500;
document.body.appendChild(canvas);
function Monster(img, x = 0, y = 0, w,h) {
this.img = img;
this.x = x;
this.y = y;
this.w = w;
this.h = h;
}
var monster;
var DrawMonster = function(mons) {
ctx.drawImage(mons.img, mons.x, mons.y, mons.w, mons.h);
}
var PreLoadImages = function() {
var img = new Image();
img.addEventListener("load", function() { // or img.onload =
function() {
monster = new Monster(this, 0, 0, 100, 100);
DrawMonster(monster);
});
img.src = "res/Mons_Pirate.jpg";
}
PreLoadImages();
</script>
</body>
</html>
I'm having trouble understanding why my code won't draw a square border on the canvas. I just started learning this stuff, and I'm afriad I'm missing something obvious...
<!DOCTYPE html>
<head>
<style type="text/css">
canvas {
background-image: url(uploads/1504975677.jpg);
width: 500px;
height: 334px;
}
</style>
<script type="text/javscript">
var x = 100;
var y = 100;
var width = 50;
var height = 50;
var canvas = document.getElementById('image');
var context = canvas.getContext('2d');
context.strokeStyle = 'white';
context.strokeRect(x, y, width, height);
</script>
<title>Test Website</title>
</head>
<body>
<canvas id="image"></canvas>
</body>
</html>
To clarify, I'm not trying to create a border for the canvas, I just want a box that is not filled in. All I get with this code is the background image and nothing drawn on top of it.
Below should be the format put your script before closing the body tag, Also change the color :-p
<!DOCTYPE html>
<head>
<style type="text/css">
canvas {
background-image: url(uploads/1504975677.jpg);
width: 500px;
height: 334px;
}
</style>
<title>Test Website</title>
</head>
<body>
<canvas id="image"></canvas>
<script type="text/javscript">
var x = 100; var y = 100; var width = 50; var height = 50; var canvas = document.getElementById('image'); var context = canvas.getContext('2d'); context.strokeStyle = 'black'; context.strokeRect(x, y, width, height);
</script>
</body>
</html>
var x = 100; var y = 100; var width = 50; var height = 50; var canvas = document.getElementById('image'); var context = canvas.getContext('2d'); context.strokeStyle = 'black'; context.strokeRect(x, y, width, height);
canvas {
width: 500px;
height: 334px;
}
<canvas id="image"></canvas>
Could someone please help to make the below code work. also is there any other way to display the images without using onload?
<head id="Head1" runat="server">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title></title>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var c = document.getElementById("myCanvas");
c.width = $(document).width();
c.height = $(document).height();
var ctx = c.getContext("2d");
var imgArray = new Array();
imgArray[0] = new Image();
imgArray[1] = new Image();
imgArray[0].src = "1.png";
imgArray[1].src = "2.png";
var x = 30;
var y = 40;
for (var i = 0; i < 2; i++) {
imgArray[i].onload = function () {
ctx.drawImage(imgArray[i], x, y);
}
x = x + 20;
}
});
</script>
</head>
I want images to be displayed on canvas using array. it works fine if i use array without for loop. please help in fixing the issue.
<body style="margin:0; height:100%; width:100%; overflow:hidden;" >
<canvas id="myCanvas" style="display:block; " >
Your browser does not support the HTML5 canvas tag.
</canvas>
</body>
</html>
It's bad practice to define a function within a loop. Try defining it outside of the loop with a named function. Also it'd probably be better to set the src of the img after the onload function is attached. Something like:
$(document).ready(function () {
var c = document.getElementById("myCanvas");
c.width = $(document).width();
c.height = $(document).height();
var ctx = c.getContext("2d");
var imgArray = new Array();
imgArray[0] = new Image();
imgArray[1] = new Image();
var x = 30;
var y = 40;
function onImageLoad() {
ctx.drawImage(this, x, y);
x = x + 20;
}
for (var i = 0; i < 2; i++) {
imgArray[i].onload = onImageLoad;
}
imgArray[0].src = "1.png";
imgArray[1].src = "2.png";
});
If you must have the loop in the function (which you don't), you would need to wrap it within a closure so that each image gets it's own onload function instead of defining the same function which is what happens in your case.
Something similar to the following would probably work:
for (var i = 0; i < 2; i++) {
imgArray[i].onload = (function(idx) {
return function() {
ctx.drawImage(imgArray[idx], x, y);
x = x + 20;
}
})(i)
}
This is how you could do it:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
// Source
var imgArray = new Array();
imgArray[0] = new Image();
imgArray[1] = new Image();
imgArray[0].src = "http://png-2.findicons.com/files/icons/963/very_emotional_emoticons/64/64_18.png";
imgArray[1].src = "http://png-3.findicons.com/files/icons/963/very_emotional_emoticons/64/64_30.png";
// Draw Images
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var startX = 0;
for (var i = 0; i < imgArray.length; i++) {
ctx.drawImage(imgArray[i], startX, 0);
startX += 74;
}
});
</script>
<canvas id="myCanvas" style="display:block;">
Your browser does not support the HTML5 canvas tag.
</canvas>
Outputs:
P.S. The images are 64x64 (width x height). So to draw them next to each other with 10px spacing, I add 10 to 64 (width), hence I do startX += 74; and the images draw like that.
You should be able to modify this code to meet your own needs.