can you animate an image on a canvas - javascript

since I'm learning new to html and javascript, I was wondering if you can place an moving image side to side on a canvas? If so how can this be done please???
Here's what I've to do so far.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="ann.css" />
<script>
window.onload = animate;
var canvas=document.getElementById('mycanvas');
var ctx=canvas.getContext('2d');
function animate()
{
window.setInterval(slide,1000);
}
function slide()
{
var obj = document.getElementById("ball");
var left = obj.style.left;
if(left === ''){
left = 0;
}
var wartosc = parseInt(left, 10);
obj.style.left = (wartosc + 10) + "px";
}
function Loop() {
if (left>canvas.width){
var right = obj.style.right;
if(right === ''){
right = 0;
}
var wartosc = parseInt(right, 10);
obj.style.right = (wartosc + 10) + "px";
}
</script>
<style>
#ball
{
position: relative;
left: 1px;
}
#mycanvas {border:1px solid #000000}
</style>
</head>
<body>
<img src="ball.gif" id="ball" alt="Usmiech" width="30" height="30" />
<canvas id=mycanvas width=600 height=50>Canvas Not Supported
</canvas>
<body>
</html>
What I want it do to is for the image to be contained inside the canvas and to move left to right and when reached the right side of canvas to go back left and so on continuously.
However my problems are if can be done, I don't know how I can put the image on the canvas and then I can't make the image move to the right once it has reached the end off the canvas. I think the issue is my loop function, which is there to try to make it go to the right.
As you can see from the fiddle link, when I remove the loop function code it works. However it will only goes to the left.
http://jsfiddle.net/eCSb4/18/
Please can someone help me fix it? :)

You can animate a spritesheet instead of a .gif.
The sequence is simple:
Clear the canvas,
Draw the next sprite in sequence and position it to advance across the canvas.
Wait a while (perhaps in a requestAnimationFrame loop).
Repeat #1.
Here's annotated code and a Demo:
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
// timing related vars
var nextTime=0;
var spriteCount=7;
var interval=700/spriteCount;
// sprite related vars
var sIndex=0;
var sw=60;
var sh=95;
var animationOn=true;
// current x,y position of sprite
var x=100;
var y=100;
// load the spritesheet
var ss=new Image();
ss.onload=start;
ss.src="http://i59.tinypic.com/jpkk6f.jpg";
function start(){
// draw the first sprite
ctx.drawImage(ss,sIndex*sw,0,sw,sh,x,y,sw,sh);
// start the animation loop
requestAnimationFrame(animate);
}
function animate(time){
// wait for the specified interval before drawing anything
if(time<nextTime || !animationOn){requestAnimationFrame(animate); return;}
nextTime=time+interval;
// draw the new sprite
ctx.clearRect(0,0,cw,ch);
ctx.drawImage(ss,sIndex*sw,0,sw,sh,x,y,sw,sh);
// get the next sprite in sequence
if(++sIndex>=spriteCount){sIndex=0;}
// advance the sprite rightward
x+=5;
if(x>cw){x=-sw-10;}
// request another animation loop
requestAnimationFrame(animate);
}
body{ background-color: ivory; }
#canvas{border:1px solid red; margin:0 auto; }
<canvas id="canvas" width=300 height=300></canvas>

Related

image not following mouse on canvas

I am having trouble creating game on html canvas. The premise of the game is you have to catch the balloons before they hit the ground. I am having problems with the background of the canvas and the basket is not moving with the mouse.
The background should be black and the basket should be following the mouse curser.
https://jsfiddle.net/pgkL09j7/8/
<html>
<head>
<title>Sean Coyne</title>
<link rel="stylesheet" type="text/css" href="home.css">
<link rel="icon" type="image/x-icon" href="favicon.ico" />
</head>
<body onload="start_game()">
<body>
<section>
<article>
<div id="logo"><img src="LogoComic.png" id="Logo"></div><br></br>
<div id="canvas">
<canvas id="c" style="border:5px solid orange" height="500" width="500"></canvas>
<p id="p1"></p>
<script>
var balloon_x=100;
var balloon_y=0;
var basket_x=100;
var basket_y=100;
var points=0;
//Background colour of canvas
var c = document.getElementById("c");
var ctx = c.getContext("2d");
ctx.fillStyle = "#000";
ctx.fillRect(0,0,500,500);
//Here is the event listener
mycanv.addEventListener("mousemove",seenmotion, false);
function seenmotion(e) {
//This is the code for the mouse
//moving over the canvas.
var bounding_box=c.getBoundingClientRect();
basket_x=(e.clientX-bounding_box.left) *
(c.width/bounding_box.width);
basket_y=(e.clientY-bounding_box.top) *
(c.height/bounding_box.height);
}
function start_game() {
setInterval(game_loop, 50);
}
function game_loop() {
// The code above is called every 50ms and is a
// frame-redraw-game-animation loop.
c.width = c.width;
// Below is the code that draws the objects
draw_balloon(balloon_x,balloon_y);
draw_basket(basket_x,basket_y);
// Below is the code that updates the balloons location
balloon_x++;
if (balloon_x>c.width) {
balloon_x=0;
}
//Here is the collision detection code
if (collision(balloon_x, balloon_y, basket_x, basket_y)) {
points -= 0.5;
}
//Here is the code for the point system
points+=1;
// and let's stick it in the top right.
var integerpoints=Math.floor(points); // make it into an integer
ctx.font="bold 24px sans-serif ";
ctx.fillText(integerpoints, c.width-50, 50);
}
context.clearRect ( 0 , 0 , 500, 500 );
function collision(basket_x, basket_y, ball_x, ball_y) {
if(balloon_y + 85 < basket_y) {
return false;
}
if (balloon_y > basket_y + 91) {
return false;
}
if (balloon_x + 80 < basket_x) {
return false;
}
if (balloon_x > basket_x + 80) {
return false;
}
return true;
}
// Code to stop the game when we're finished playing
function stop_game() {
}
//Code for the ball
function draw_balloon(x,y) {
var balloon_img=new Image();
balloon_img.src="balloon.png";
ctx.drawImage(balloon_img,x,y);
}
//Code for the basket
function draw_basket(x,y) {
var basket_img=new Image();
basket_img.src="basket.png";
ctx.drawImage(basket_img,x,y);
}
</script>
</div>
</article>
</section>
</body>
</html>
You have to change the variable for the mouselistener. So instead of
mycanv.addEventListener("mousemove",seenmotion, false);
you have to write this
c.addEventListener("mousemove",seenmotion, false);
This move the basket with the mouse, but the image isn't still right. You have to subtract half of width and height of the image from the x and y coordinate.
To fix your background you have to modify your CSS. the article and the section tag have both full width/height und an own background. This shouldn't be to hard to fix, just change the background of #c to black.
#c {
background-color: black;
}
Here's the jsfiddle: https://jsfiddle.net/pgkL09j7/10/
Visit http://www.w3schools.com/ for more information about CSS and JS. Also the code can be more easier and structured.

HTML5 Canvas Flip Card Animation

I am trying to create flip card effect using html canvas by drawing it in the canvas.
no ccs3 tricks needed. It should be done in a native manner;
this is my initial test using phaser.js by changing the scale
<html>
<head>
</head>
<body>
<div id="game_canvas">
</div>
<script src = "jquery.min.js"></script>
<script src = "phaser.min.js"></script>
<script>
var game;
var sprite;
$(document).ready(function(){
game = new Phaser.Game(640, 480, Phaser.AUTO, 'game_canvas', {
preload : preload,
create : create,
update : update
});
function preload () {
game.load.image('card','download.png');
}
function create() {
this.delay = 1000;
this.spawn = 0;
sprite = game.add.sprite(game.width/4, game.height/4, 'card');
}
function update() {
console.log(this.spawn > game.time.now);
if (this.spawn > game.time.now) {
return;
}
this.spawn = game.time.now + this.delay;
sprite.scale.x *= -1;
}
});
</script>
</body>
</html>
and what i want to attain is like this using the canvas
http://www.turnjs.com/#samples/steve-jobs/10
anyone has any idea on how to do it would be a great help
thanks in advance
here is the current demo
http://sopronioli713.github.io/test/
Here's a canvas based card flip (with rotation) that I did a while back for fun.
It works by scaling in just the X direction so that the card appears to be flipping.
Notes about the effect:
You can omit the rotations if they are not required.
This effect translates to the horizontal center of the card before scaling (flipping) which makes the card "spin". If you instead want a "dealers flip" then you would instead translate to the edge of the card.
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
var x=150;
var y=150;
var scaleX=100;
var angle=0;
var scaleDirection=-1;
var scaleDelta=1;
var PI2=Math.PI*2;
var backCanvas=document.createElement('canvas');
var backCtx=backCanvas.getContext('2d');
var imgCount=2;
var front=new Image();front.onload=start;front.src="https://dl.dropboxusercontent.com/u/139992952/multple/kingcard.png";
var back=new Image();back.onload=start;back.src="https://dl.dropboxusercontent.com/u/139992952/multple/kingcardback.png";
function start(){
if(--imgCount>0){return;}
animate();
}
function draw(x,y,scaleX,angle){
ctx.clearRect(0,0,cw,ch);
ctx.translate(x,y);
ctx.rotate(angle);
ctx.scale(scaleX,1);
if(scaleX>=0){
ctx.drawImage(front,-front.width/2,-front.height/2);
}else{
ctx.drawImage(back,-back.width/2,-back.height/2);
}
ctx.setTransform(1,0,0,1,0,0);
}
function animate(time){
draw(x,y,scaleX/100,angle);
angle+=PI2/720;
scaleX+=scaleDirection*scaleDelta;
if(scaleX<-100 || scaleX>100){
scaleDirection*=-1;
scaleX+=scaleDirection*scaleDelta;
}
requestAnimationFrame(animate);
}
body{ background-color: ivory; }
#canvas{border:1px solid red;}
<canvas id="canvas" width=300 height=300></canvas>
On the other hand...
You link to a page-turning demo--which is a totally different animal. If that's what your after Rick Barraza has done a nice writeup on how to do that here: http://rbarraza.com/html5-canvas-pageflip/

Stop a moving image in HTML5 Canvas

Im pretty new to the canvas element in HTML5.
What i want to do is move an image from the right hand side of the screen to the left, once it reaches the left i want it to begin again from the right hand side. I only want it to do this maybe 2/3 times and then stop.
I tried to add in a for loop so that it would limit the iterations but this was unsuccessful.
Any help at all would be appreciated.
Heres my code:
<canvas id="myCanvas" width="600" height="400"></canvas>
<script>
window.addEventListener('load', function () {
var
img = new Image,
ctx = document.getElementById('myCanvas').getContext('2d');
img.src = 'pies.png';
img.addEventListener('load', function () {
var interval = setInterval(function() {
var x = 650, y = 194;
return function () {
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
ctx.drawImage(img, x, y);
x -= 1;
if (x < -500) {
x = 650;
}
};
}(), 1000/40);
}, false);
}, false);
</script>
One way is to specify a maximum number of leftward moves:
// allow leftward moves = 2 1/2 time the canvas width
// (plus an allowance for the image width)
var maxMoves = (canvas.width+image.width) *2.5;
Then just countdown maxMoves until zero. At zero, stop your animation:
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
ctx.fillStyle='skyblue';
var currentX=cw;
var delay=16; // 16ms between moves
var continueAnimating=true;
var nextMoveTime,maxMoves;
var img=new Image();
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/multple/sun.png";
function start(){
maxMoves=(cw+img.width)*2.5;
nextMoveTime=performance.now();
requestAnimationFrame(animate);
}
function animate(currentTime){
if(continueAnimating){ requestAnimationFrame(animate); }
if(currentTime<nextMoveTime){return;}
nextMoveTime=currentTime+delay;
ctx.fillRect(0,0,cw,ch);
ctx.drawImage(img,currentX,50);
if(--currentX<-img.width){ currentX=cw; }
if(--maxMoves<0){continueAnimating=false;}
}
body{ background-color: ivory; padding:10px; }
#canvas{border:1px solid red;}
<p>Stop animating after 2 1/2 "sunrises"</p>
<canvas id="canvas" width=300 height=300></canvas>

Find all black rectangles in canvas

Let's say I have an scanned paper with some black filled rectangles and I want to positionate all of them, getting their coordinates (X and Y) and their dimensions (Width and Height).
Is there any accurate algorithm which does what I need? I'm new to pixel processing with Javascript and Canvas and I need some help. Thanks in advance!
Identifying the x,y,width,height of all black rectangles involves these steps:
Use context.getImageData to get an array of all the r,g,b,a pixel information on the canvas.
Scan the pixel colors to find any one black pixel.
Find the bounding box of the black rectangle containing that one black pixel.
That bounding box will give you the x,y,width,height of one black rectangle.
Clear that black rectangle so that it is not found when searching for the next black rectangle.
Repeat step#1 until all the rectangles are identified.
Here's example code and a Demo: http://jsfiddle.net/m1erickson/3m0dL368/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
canvas{border:1px solid red;}
#clips{border:1px solid blue; padding:5px;}
img{margin:3px;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw,ch;
// background definition
// OPTION: look at the top-left pixel and assume == background
// then set these vars automatically
var isTransparent=false;
var bkColor={r:255,g:255,b:255};
var bkFillColor="rgb("+bkColor.r+","+bkColor.g+","+bkColor.b+")";
cw=canvas.width;
ch=canvas.height;
ctx.fillStyle="white";
ctx.fillRect(0,0,canvas.width,canvas.height);
drawTestRect(30,30,50,50,"1");
drawTestRect(100,30,50,50,"2");
drawTestRect(170,30,50,50,"3");
function drawTestRect(x,y,w,h,label){
ctx.fillStyle="black";
ctx.fillRect(x,y,w,h);
ctx.fillStyle="white";
ctx.font="24px verdana";
ctx.fillText(label,x+10,y+25);
}
function clipBox(data){
var pos=findEdge(data);
if(!pos.valid){return;}
var bb=findBoundary(pos,data);
alert("Found target at "+bb.x+"/"+bb.y+", size: "+bb.width+"/"+bb.height);
clipToImage(bb.x,bb.y,bb.width,bb.height);
if(isTransparent){
// clear the clipped area
// plus a few pixels to clear any anti-aliasing
ctx.clearRect(bb.x-2,bb.y-2,bb.width+4,bb.height+4);
}else{
// fill the clipped area with the bkColor
// plus a few pixels to clear any anti-aliasing
ctx.fillStyle=bkFillColor;
ctx.fillRect(bb.x-2,bb.y-2,bb.width+4,bb.height+4);
}
}
function xyIsInImage(data,x,y){
// find the starting index of the r,g,b,a of pixel x,y
var start=(y*cw+x)*4;
if(isTransparent){
return(data[start+3]>25);
}else{
var r=data[start+0];
var g=data[start+1];
var b=data[start+2];
var a=data[start+3]; // pixel alpha (opacity)
var deltaR=Math.abs(bkColor.r-r);
var deltaG=Math.abs(bkColor.g-g);
var deltaB=Math.abs(bkColor.b-b);
return(!(deltaR<5 && deltaG<5 && deltaB<5 && a>25));
}
}
function findEdge(data){
for(var y=0;y<ch;y++){
for(var x=0;x<cw;x++){
if(xyIsInImage(data,x,y)){
return({x:x,y:y,valid:true});
}
}}
return({x:-100,y:-100,valid:false});
}
function findBoundary(pos,data){
var x0=x1=pos.x;
var y0=y1=pos.y;
while(y1<=ch && xyIsInImage(data,x1,y1)){y1++;}
var x2=x1;
var y2=y1-1;
while(x2<=cw && xyIsInImage(data,x2,y2)){x2++;}
return({x:x0,y:y0,width:x2-x0,height:y2-y0+1});
}
function drawLine(x1,y1,x2,y2){
ctx.beginPath();
ctx.moveTo(x1,y1);
ctx.lineTo(x2,y2);
ctx.strokeStyle="red";
ctx.lineWidth=0.50;
ctx.stroke();
}
function clipToImage(x,y,w,h){
// don't save anti-alias slivers
if(w<3 || h<3){ return; }
// save clipped area to an img element
var tempCanvas=document.createElement("canvas");
var tempCtx=tempCanvas.getContext("2d");
tempCanvas.width=w;
tempCanvas.height=h;
tempCtx.drawImage(canvas,x,y,w,h,0,0,w,h);
var image=new Image();
image.width=w;
image.height=h;
image.src=tempCanvas.toDataURL();
$("#clips").append(image);
}
$("#unbox").click(function(){
var imgData=ctx.getImageData(0,0,cw,ch);
var data=imgData.data;
clipBox(data);
});
}); // end $(function(){});
</script>
</head>
<body>
<button id="unbox">Clip next sub-image</button><br>
<canvas id="canvas" width=300 height=150></canvas><br>
<h4>Below are images clipped from the canvas above.</h4><br>
<div id="clips"></div>
</body>
</html>

Canvas: animating a simple star field

I'm relatively new to Canvas. In finding my feet I'm creating a simple arcade game.
My question is regarding CPU performance / efficiency.
I'm creating 100 randomly positioned white dots as stars on a black background. On each requestAnimationFrame, the stars move one pixel to the left and as they get to the extreme left that column of pixels is placed on the extreme right of the screen.
Using requestAnimationFrame I'm calling the following function:
bgAnimateId = requestAnimationFrame( scrollBg );
function scrollBg() {
var imgData = ctx.getImageData( 0, 0, 1, canvas.height );
var areaToMoveLeft = ctx.getImageData( 1, 0, canvas.width-1, canvas.height );
ctx.putImageData( areaToMoveLeft, 0, 0 );
ctx.putImageData( imgData, canvas.width-1, 0 );
bgAnimateId = requestAnimationFrame( scrollBg );
}
My concern is - would it be better to create 100 small canvas elements (or 100 divs) and animate those, or is it better to utilise the pixel methods that I've used above.
Many thanks for your help / guidance in advance :-)
It turns out that context.getImageData and context.putImageData are very expensive to perform and having 100 canvases is too many.
So here’s a plan for creating an efficient panning starfield:
Using context.drawImage is very efficient and not very expensive to perform.
Here’s how to draw a random starfield on a canvas and then save that canvas as an image:
// draw a random starfield on the canvas
bkCtx.beginPath();
bkCtx.fillStyle="darkblue";
bkCtx.rect(0,0,background.width,background.height);
bkCtx.fill();
bkCtx.beginPath();
for(var n=0;n<100;n++){
var x=parseInt(Math.random()*canvas.width);
var y=parseInt(Math.random()*canvas.height);
var radius=Math.random()*3;
bkCtx.arc(x,y,radius,0,Math.PI*2,false);
bkCtx.closePath();
}
bkCtx.fillStyle="white";
bkCtx.fill();
// create an new image using the starfield canvas
var img=document.createElement("img");
img.src=background.toDataURL();
You will have 2 kinds of drawing going on:
A panning background of stars
A foreground where your game objects will be drawn.
So create 2 canvases aligned on top of each other. The back canvas is for the stars and the front canvas for you game objects.
This is the background canvas that pans the moving image of the starfield:
This is the foreground canvas where your game objects go -- see my cheesy “rocket”
These are the 2 canvases stacked to create a background/foreground combination:
Here is the Html+CSS to stack the 2 canvases:
<div id="container">
<canvas id="background" class="subcanvs" width=300; height=300;></canvas>
<canvas id="canvas" class="subcanvs" width=300; height=300;></canvas>
</div>
#container{
position:relative;
border:1px solid blue;
width:300px;
height:300px;
}
.subcanvs{
position:absolute;
}
Here’s how to use the starfield image to create a panning starfield on the background canvas:
var fps = 60;
var offsetLeft=0;
panStars();
function panStars() {
// increase the left offset
offsetLeft+=1;
if(offsetLeft>backImage.width){ offsetLeft=0; }
// draw the starfield image and
// draw it again to fill the empty space on the right of the first image
bkCtx.clearRect(0,0,background.width,background.height);
bkCtx.drawImage(backImage,-offsetLeft,0);
bkCtx.drawImage(backImage,backImage.width-offsetLeft,0);
setTimeout(function() {
requestAnimationFrame(panStars);
}, 1000 / fps);
}
Now the front canvas is used for all your game objects.
Your game is efficient and performant with 2 canvases dedicated to their own purposes.
Here is code and a Fiddle: http://jsfiddle.net/m1erickson/5vfVb/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{padding:20px;}
#container{
position:relative;
border:1px solid blue;
width:300px;
height:300px;
}
.subcanvs{
position:absolute;
}
</style>
<script>
$(function(){
// Paul Irish's great RAF shim
window.requestAnimFrame = (function(callback) {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60);
};
})();
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var background=document.getElementById("background");
var bkCtx=background.getContext("2d");
// create an image of random stars
var backImage=RandomStarsImage();
// draw on the front canvas
ctx.beginPath();
ctx.fillStyle="red";
ctx.rect(75,100,100,50);
ctx.arc(175,125,25,0,Math.PI*2,false);
ctx.closePath();
ctx.fill();
// start panning the random stars image across the background canvas
var fps = 60;
var offsetLeft=0;
panStars();
function panStars() {
// increase the left offset
offsetLeft+=1;
if(offsetLeft>backImage.width){ offsetLeft=0; }
// draw the starfield image and draw it again
// to fill the empty space on the right of the first image
bkCtx.clearRect(0,0,background.width,background.height);
bkCtx.drawImage(backImage,-offsetLeft,0);
bkCtx.drawImage(backImage,backImage.width-offsetLeft,0);
setTimeout(function() {
requestAnimFrame(panStars);
}, 1000 / fps);
}
function RandomStarsImage(){
// draw a random starfield on the canvas
bkCtx.beginPath();
bkCtx.fillStyle="darkblue";
bkCtx.rect(0,0,background.width,background.height);
bkCtx.fill();
bkCtx.beginPath();
for(var n=0;n<100;n++){
var x=parseInt(Math.random()*canvas.width);
var y=parseInt(Math.random()*canvas.height);
var radius=Math.random()*3;
bkCtx.arc(x,y,radius,0,Math.PI*2,false);
bkCtx.closePath();
}
bkCtx.fillStyle="white";
bkCtx.fill();
// create an new image using the starfield canvas
var img=document.createElement("img");
img.src=background.toDataURL();
return(img);
}
}); // end $(function(){});
</script>
</head>
<body>
<div id="container">
<canvas id="background" class="subcanvs" width=300; height=300;></canvas>
<canvas id="canvas" class="subcanvs" width=300; height=300;></canvas>
</div>
</body>
</html>

Categories

Resources