I am trying to load an image... it's in the same folder and I'm not getting any errors as far as I know everything should be fine... I'm not quite sure what's wrong... if you have any ideas let me know in the comments! thanks for helping!
CODE:
<!DOCTYPE html>
<html>
<canvas id="gameCanvas" width="800" height="600"></canvas>
<script>
var canvas
var ctx
window.onload = function() {
canvas = document.getElementById("gameCanvas")
ctx = canvas.getContext("2d")
ctx.fillStyle = "red"
ctx.fillRect(0, 0, 50, 50)
var img = new Image();
img.src = "scp.png";
ctx.drawImage(img, 145, 145, 50, 50);
}
document.addEventListener("keydown", keyDown)
document.addEventListener("keyup", keyUp)
var Xspeed = 0
var Xpos = 10
setInterval(draw, 50)
function keyUp(evt) {
if (evt.keyCode == 32) Xspeed = 0
}
function keyDown(evt) {
if (evt.keyCode == 32) Xspeed = 2
}
function draw() {
ctx.clearRect(0, 0, 999, 999)
Xpos = Xpos + Xspeed
ctx.fillRect(Xpos, 0, 20, 20)
}
</script>
</html>
It appears that you are constantly drawing over the picture in the draw() function. You can add the
var img = new Image();
img.src = "img_the_scream.jpg";
ctx.drawImage(img, 145, 145, 50, 50);
into the draw function which will show to image and the square.
Related
I'm super new to coding and I've been trying to figure out animations with Javascript and HTML5. I have this "loading bar" like animation where a rectangle expands until it fills up the canvas. The idea is that once the canvas is covered the box clears and starts over. Instead, the rectangle fills the canvas and just starts flickering. Any ideas?
window.onload = function() {
var wipeWidth = 0
var canvas = document.getElementById('canvas');
var context = canvas.getContext("2d");
console.log(context);
function drawRect() {
context.clearRect(0,0,300,150)
context.fillStyle = "#305ef2";
context.rect(0, 0, wipeWidth, 150);
context.fill()
wipeWidth += 10
if(wipeWidth > 300) {
wipeWidth = 0;
}
}
setInterval(drawRect,50)
}
You forgot to clear the path (beginPath). You can use fillRect instead to avoid this.
window.onload = function() {
var wipeWidth = 0
var canvas = document.getElementById('canvas');
var context = canvas.getContext("2d");
console.log(context);
function drawRect() {
context.clearRect(0, 0, 300, 150)
context.fillStyle = "#305ef2";
// this
context.beginPath()
context.rect(0, 0, wipeWidth, 150);
context.fill()
// or just this
// context.fillRect(0, 0, wipeWidth, 150);
wipeWidth += 10
if (wipeWidth > 300) {
wipeWidth = 0;
}
}
setInterval(drawRect, 50)
}
<canvas id="canvas"></canvas>
fillRect, requestAnimationFrame
var wipeWidth = 0
var canvas = document.getElementById('canvas');
var context = canvas.getContext("2d");
var direction = +10;
function drawRect() {
context.clearRect(0, 0, canvas.width, canvas.height);
context.fillStyle = "#305ef2";
context.fillRect(0, 0, wipeWidth, 150);
wipeWidth += direction
if (wipeWidth > canvas.width || wipeWidth < 0) {
direction *= -1;
}
requestAnimationFrame(drawRect)
}
drawRect()
canvas {
background: gray;
}
<canvas id="canvas" width="600" height="50"></canvas>
I am trying to make the image switch when I press the space bar. but.... when I do I get an error "ig is not defined" Im not sure why its happening any ideas? I should also note that I am using notepad its the free text editor on windows 10 im sure the same code works on mac and linux
Here is the code:
<!DOCTYPE html>
<html>
<canvas id="gameCanvas" width="800" height="600"></canvas>
<script>
var canvas
var ctx
window.onload = function() {
canvas = document.getElementById("gameCanvas")
ctx = canvas.getContext("2d")
ctx.fillStyle = "red"
ctx.fillRect(0, 0, 50, 50)
}
function draw() {
ctx.clearRect(0, 0, 999, 999)
Xpos = Xpos + Xspeed
ctx.fillRect(Xpos, 0, 20, 20)
var ig = new Image()
ig.src = "alien2.png"
var img = new Image();
img.src = "scp.png";
ctx.drawImage(img, Xpos, 145, 50, 50);
}
document.addEventListener("keydown", keyDown)
document.addEventListener("keyup", keyUp)
var Xspeed = 0
var Xpos = 10
setInterval(draw, 50)
function keyUp(evt) {
if (evt.keyCode == 32) Xspeed = 0
ctx.drawImage(ig, 100, 100)
}
function keyDown(evt) {
if (evt.keyCode == 32) Xspeed = 2
ctx.drawImage(ig, 100, 100)
}
</script>
</html>
Move the functions inside the onload event listener so the functions can reference ctx and make ig a global variable:
var canvas
var ctx
window.onload = function() {
canvas = document.getElementById("gameCanvas")
ctx = canvas.getContext("2d")
ctx.fillStyle = "red"
ctx.fillRect(0, 0, 50, 50)
function draw() {
ctx.clearRect(0, 0, 999, 999)
Xpos = Xpos + Xspeed
ctx.fillRect(Xpos, 0, 20, 20)
window.ig = new Image()
ig.src = "https://www.gravatar.com/avatar/0fdacb141bca7fa57c392b5f03872176?s=48&d=identicon&r=PG&f=1";
var img = new Image();
img.src = "https://www.gravatar.com/avatar/0fdacb141bca7fa57c392b5f03872176?s=48&d=identicon&r=PG&f=1";
ctx.drawImage(img, Xpos, 145, 50, 50);
}
document.addEventListener("keydown", keyDown)
document.addEventListener("keyup", keyUp)
var Xspeed = 0
var Xpos = 10
setInterval(draw, 50)
function keyUp(evt) {
if (evt.keyCode == 32) Xspeed = 0
ctx.drawImage(ig, 100, 100)
}
function keyDown(evt) {
if (evt.keyCode == 32) Xspeed = 2
ctx.drawImage(ig, 100, 100)
}
}
<!DOCTYPE html>
<html>
<body>
<canvas id="gameCanvas" width="800" height="600"></canvas>
</body>
</html>
The Menu
I want to make it so when the user clicks play it takes you to another HTML page. I have placed a rect over the play area and want to make it so the rect is what the user is clicking as the play text is part of a single image.
This is the JS for my rect:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Red rectangle
ctx.beginPath();
ctx.lineWidth = "6";
ctx.strokeStyle = "red";
ctx.rect(125, 140, 230, 90);
ctx.stroke();
You can achieve it like this
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var img = new Image();
img.onload = draw;
function draw() {
canvas.width = this.width;
canvas.height = this.height;
ctx.drawImage(this, 0, 0);
ctx.beginPath();
ctx.lineWidth = "6";
ctx.strokeStyle = "red";
ctx.rect(101, 114, 184, 71);
ctx.stroke();
}
img.src = 'https://i.stack.imgur.com/M3x29.jpg';
canvas.onclick = function(e) {
if (e.offsetX > 102 && e.offsetX < 286 && e.offsetY > 110 && e.offsetY < 182) {
window.location = 'http://stackoverflow.com'; // another html page location
}
};
<canvas id="canvas"></canvas>
I am trying to make a screen following the player so that the player is in the middle of the screen. I have already made it in another game, but here it doesn't work. Here is my code :
var c = document.getElementById("main");
var ctx = c.getContext("2d");
var screen = document.getElementById("screen").getContext("2d");
var WhatUSeeWidth = document.getElementById("screen").width;
var WhatUSeeHeight = document.getElementById("screen").height;
ctx.beginPath();
for (i = 0; i < 100; i ++) {
if (i % 2) {
ctx.fillStyle = "red";
}
else {
ctx.fillStyle = "blue";
}
ctx.fillRect(0, i * 100, 500, 100);
}
var player = {
x : 700,
y : 800
}
setInterval(tick, 100);
function tick() {
screen.beginPath();
screen.drawImage(c, player.x - WhatUSeeWidth / 2, player.y - WhatUSeeHeight / 2, WhatUSeeWidth, WhatUSeeHeight, 0, 0, WhatUSeeWidth, WhatUSeeHeight);
}
canvas {
border: 2px solid black;
}
<canvas id="main" width="500" height="500"h></canvas>
<canvas id="screen" width="500" height="500"></canvas>
I want to draw The Blue and red canvas in The "screen" canvas Using drawImage
Ok , from your comment I understood what you are looking for. But the problem is that you probably start by an example without having understood. I try to give you my interpretation of what you do , but you should look for a good guide that starts with the basics and deepen animations (for example this: http://www.html5canvastutorials.com/).
HTML
<canvas id="canvasLayer" width="500" height="500"></canvas>
Javascript
var canvas = document.getElementById("canvasLayer");
var context = canvas.getContext("2d");
var WhatUSeeWidth = document.getElementById("canvasLayer").width;
var WhatUSeeHeight = document.getElementById("canvasLayer").height;
var player = {
x : 0,
y : 0
}
function drawBackground() {
for (i = 0; i < 100; i ++) {
if (i % 2) {
context.fillStyle = "red";
}
else {
context.fillStyle = "blue";
}
context.fillRect(0, i * 100, 500, 100);
}
}
function playerMove() {
context.beginPath();
var radius = 5;
context.arc(player.x, player.y, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'green';
context.fill();
context.lineWidth = 1;
context.strokeStyle = '#003300';
context.stroke();
}
setInterval(tick, 100);
function tick() {
context.clearRect(0, 0, canvas.width, canvas.height);
drawBackground();
player.x++;
player.y++;
playerMove();
}
This is the JSFiddle.
EDIT WITH THE CORRECT ANSWER
The error is in the position of the object "player". It is located outside of the canvas, width:500 height:500 and the "player" is in position x:700 y:800.
Changing the position of the player your copy will appear.
var player = {
x : 50,
y : 50
}
Here the jsfiddle example.
Is it possible to show / hide part of canvas image like Image Sprite ?
Example Case:
I have a canvas of 200 X 200 dimension.
On One button click i want to show part of canvas from point (100, 100) to (120, 120).
On another i want to show entire canvas.
Any help in how to do this?
As sprite are usually shown within another element as a background, perhaps hiding the parent element would take care of your problem?
<style>
#sprite {
width: 100px;
height: 100px;
background-image: src(sprite.png);
background-position: 100px 100px;
}
</style>
<script>
var hide = false;
function show() {
if(!hide) {
document.getElementById("sprite").style.width="200px";
hide = true;
}
else {
document.getElementById("sprite").style.width="100px";
hide = false;
}
}
</script>
<div id="button" onclick="show();">button</div>
<div id="sprite"></div>
This is if the sprite's position is 100px to the right. You could also use document.getElementById('#sprite').style.backgroundPosition="200px 200px"; to change position of the sprite background entirely.
You can use the clipping form of drawImage to display your desired portion of the full image:
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
var img=new Image();
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/cats.png";
function start(){
ctx.drawImage(img, 0,0,78,86, 0,0,78,86);
document.getElementById('partial').onclick=function(){
ctx.clearRect(0,0,cw,ch);
ctx.drawImage(img, 0,0,78,86, 0,0,78,86);
}
document.getElementById('full').onclick=function(){
ctx.clearRect(0,0,cw,ch);
ctx.drawImage(img, 0,0);
}
}
body{ background-color: ivory; }
#canvas{border:1px solid red;}
<button id='partial'>Show partial canvas</button>
<button id='full'>Show full canvas</button>
<br><canvas id="canvas" width=300 height=300></canvas>
You can clip the image this way.
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var btn = document.getElementById('btn');
var c = 0;
var img = new Image();
img.src = 'http://placehold.it/200/200';
img.onload = function() {
canvas.width = img.width;
canvas.height = img.height;
context.drawImage(img, 0, 0)
}
btn.onclick = function() {
if (c++ % 2 == 0) {
context.clearRect(0, 0, canvas.width, canvas.height);
context.drawImage(img, 100, 100, 20, 20, 100, 100, 20, 20);
btn.value = 'Unclip';
}
else {
context.drawImage(img, 0, 0);
btn.value = 'Clip';
}
}
<input id="btn" type="button" value="Clip" /><br />
<canvas id="canvas"></canvas>
EDIT
When a user clicks on the canvas, you can get the exact co-ordinates of where the event happened and if the co-ordinates lies inside of the middle circle, you can toggle the whole image by using the same clipping method.
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var c = 0;
var img = new Image();
img.src = 'http://s25.postimg.org/cv29exevj/index.png';
img.onload = function() {
canvas.width = img.width;
canvas.height = img.height;
context.drawImage(img, 80, 80, 40, 40, 80, 80, 40, 40);
}
canvas.onclick = function(e) {
var x = e.clientX - canvas.getBoundingClientRect().left;
var y = e.clientY - canvas.getBoundingClientRect().top;
if (x >= 80 && x <= 120 && y >= 80 && y <= 120) {
if (c++ % 2 == 0) {
context.clearRect(0, 0, canvas.width, canvas.height);
context.drawImage(img, 0, 0);
} else {
context.clearRect(0, 0, canvas.width, canvas.height);
context.drawImage(img, 80, 80, 40, 40, 80, 80, 40, 40);
}
}
}
<canvas id="canvas"></canvas>