Animate image js - javascript

I have 2 images on canvas and i want to make imageObg to animate. Actually i want it to make a linear move to the right.I found a way to animate an object like a rectangle but i cant animate an image object that i use from another source.
Is there anyway that can i manage to do i? Does anyone knows?
window.onload = function() {
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var imageObj = new Image();
var imageObj2 = new Image();
imageObj.onload = function() {
context.drawImage(imageObj, 69, 130);
};
imageObj2.onload = function() {
context.drawImage(imageObj2, 0, 0);
};
imageObj.src = 'http://imageshack.com/a/img745/822/pXDK5F.png'
imageObj2.src = 'http://i.dailymail.co.uk/i/pix/2014/09/04/1409790551890_wps_28_Astronaut_Reid_Wiseman_po.jpg'
};
body {
background-color: black
}
<div id='d1' style="position:absolute; top:80px; left:150px; z-index:1">
<canvas id='myCanvas' width='962' height='500' style="border:10px solid #ffffff;">
Your browser does not support HTML5 Canvas.
</canvas>
</div>

Just two things.
Set a periodically render routine using setInterval.
Set a move (or physics) routine, call it after each render.
window.onload = function() {
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var imageObj = new Image();
var imageObj2 = new Image();
imageObj.src = 'http://imageshack.com/a/img745/822/pXDK5F.png'
imageObj2.src = 'http://i.dailymail.co.uk/i/pix/2014/09/04/1409790551890_wps_28_Astronaut_Reid_Wiseman_po.jpg'
window.setInterval(renderFrame, 50);
var ship = {
x: 69,
y: 130
};
function renderFrame() {
moveShip();
context.clearRect(0, 0, canvas.width, canvas.height);
if (imageObj.complete) {
context.drawImage(imageObj2, 0, 0);
}
if (imageObj.complete) {
context.drawImage(imageObj, ship.x, ship.y);
}
}
function moveShip() {
ship.x += 20;
if (ship.x > canvas.width) {
ship.x = 0 - imageObj.width;
ship.y = Math.random() * 250 + 50;
}
}
};
body {
background-color: black
}
<div id='d1' style="position:absolute; top:80px; left:150px; z-index:1">
<canvas id='myCanvas' width='962' height='500' style="border:10px solid #ffffff;">
Your browser does not support HTML5 Canvas.
</canvas>
</div>

Just increase the x position of the image with a setInterval command.
var img = document.createElement("IMG");
var img.src = [Image Source];
var x = 0;
window.setInterval(function() {
x ++;
context.clearRect(0, 0, canvas.width, canvas.height);
context.drawImage(img, x, 0);
}, 50);
Hope this helps.
Edit:
Here is a JSFiddle Example.

Related

Saving multilayer canvas angularjs javascript

I have a multilayer canvas that I want to save locally with a button(it will eventually have to be saved on aws but for now I am trying to figure out how to do it locally). I want one png file of the entire canvas and not just one layer. How would I do this, I've tried a few tutorials but they didn't seem to work. I have just started using javascript and angularjs so bear with me
AngularJS/HTML
<div style="position: relative; border: 1px solid black;">
<canvas id="layer1" width="200" height="200" style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
<canvas id="layer2" width="200" height="200" style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas>
</div>
<p><button onclick="body()">Body</button></p>
<p><button onclick="hairstyle1()">Hair style 1</button></p>
<p><button onclick="hairstyle2()">Hair style 2</button></p>
Javascript
function body() {
var canvas = document.getElementById('layer1');
var ctx = canvas.getContext('2d');
var imageObj = new Image();
imageObj.onload = function() {
ctx.drawImage(imageObj, 0, 0, imageObj.width, imageObj.height);
};
imageObj.src = 'body.png';
}
function hairstyle1() {
var canvas = document.getElementById('layer2');
var ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height);
var imageObj = new Image();
imageObj.onload = function() {
ctx.drawImage(imageObj, 50, 7, imageObj.width, imageObj.height);
};
imageObj.src = 'hair1.png';
}
function hairstyle2() {
var canvas = document.getElementById('layer2');
var ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height);
var imageObj = new Image();
imageObj.onload = function() {
ctx.drawImage(imageObj, 50, 7, imageObj.width, imageObj.height);
};
imageObj.src = 'hair2.png';
}
If the canvas's are the same size, you can use drawImage to draw each one on another canvas.
var newCanvas = document.createElement('canvas');
newCanvas.width = 200;
newCanvas.height = 200;
var newCtx = newCanvas.getContext('2d');
newCtx.drawImage(document.getElementById("layer1"), 0, 0);
newCtx.drawImage(document.getElementById("layer2"), 0, 0);
// convert to url
console.log(newCanvas.toDataURL());
Esentially, canvas's can be treated as image objects as well.

html5 canvas mirroring objects

I wrote the following code in my text editor:
<!DOCTYPE HTML><html>
<head>
<script>
window.onload = function()
{
var canvas = document.getElementById("canvasArea");
var context = canvas.getContext("2d");
var ball = new Image();
var smallImage = "https://i.warosu.org/data/sci/img/0076/83/1448614341262.png";
var ballXPos = 75;
var ballYPos = 15;
var ballWidth = 90;
var ballHeight = 90;
var reflectAdj = 3.5;
var reflectAlpha = .4;
var reflect Y = (2*ballYPos) + (2*(ballHeight-reflectAdj));
var gradLV = context.createLinearGradient(0, 0, 0, canvas.height);
ball.onload = function()
{
gradLV.addColorStop( 0, "lightskyblue");
gradLV.addColorStop(.3, "orange");
gradLV.addColorStop(1, "blue");
context.fillStyle = gradLV;
context.fillRect(0, 0, canvs.width, canvas.height);
context.translate(0, reflectY);
context.scale(1,-1);
context.globalAlpha = reflectAlpha;
context.drawImage(ball, ballXpos, ballYpos, ballWidth, ballHeight);
}
}
</script>
</head>
<body>
<div style = "width:400px; height:210px; margin:0 auto; padding:5px;">
<canvas id = "canvasArea" width = "400" height = "210"
style = "border:2px solid black">
Your browser doesn't currently support HTML5 Canvas.
</canvas>
</div>
</body>
</html>
In this code, the canvas is supposed to show a mirrored object, but the canvas is completely blank. Can someone please tell me what I did wrong/ PLease and thank you.
Your code was full of a number of small errors, most of which were typos. You were also failing to specify the image URL as the src of the new Image() constructor.
The code below fixes these issues and provides visual output on the canvas. I'm not sure exactly what mirror effect you're going for, but hopefully this sets you on the right path.
window.onload = function() {
var canvas = document.getElementById("canvasArea");
var context = canvas.getContext("2d");
var ball = new Image();
ball.src = "https://i.warosu.org/data/sci/img/0076/83/1448614341262.png";
var ballXPos = 75;
var ballYPos = 15;
var ballWidth = 90;
var ballHeight = 90;
var reflectAdj = 3.5;
var reflectAlpha = .4;
var reflectY = (2*ballYPos) + (2*(ballHeight-reflectAdj));
var gradLV = context.createLinearGradient(0, 0, 0, canvas.height);
ball.onload = function() {
gradLV.addColorStop( 0, "lightskyblue");
gradLV.addColorStop(.3, "orange");
gradLV.addColorStop(1, "blue");
context.fillStyle = gradLV;
context.fillRect(0, 0, canvas.width, canvas.height);
context.translate(0, reflectY);
context.scale(1,-1);
context.globalAlpha = reflectAlpha;
context.drawImage(ball, ballXPos, ballYPos, ballWidth, ballHeight);
}
}
<div style = "width:400px; height:210px; margin:0 auto; padding:5px;">
<canvas id = "canvasArea" width = "400" height = "210" style = "border:2px solid black">
Your browser doesn't currently support HTML5 Canvas.
</canvas>
</div>

Canvas - drawImage() after clearRect()

I have a problem. I am creating simple game in Canvas using JavaScript. Image doesn't display after call clearRect(), does anyone know, how to solve it?
var left1 = 0;
var context1 = document.getElementById('canvas1').getContext('2d');
render1();
function render1() {
var image = new Image();
image.onload = function () {
context1.drawImage(image, left1, 0, 200, 200);
};
image.src = 'http://www.pngall.com/wp-content/uploads/2016/06/Earth-Free-Download-PNG.png';
left1++;
requestAnimationFrame(render1);
}
var left2 = 0;
var context2 = document.getElementById('canvas2').getContext('2d');
render2();
function render2() {
context2.clearRect(0, 0, 500, 250);
var image = new Image();
image.onload = function () {
context2.drawImage(image, left2, 0, 200, 200);
};
image.src = 'http://www.pngall.com/wp-content/uploads/2016/06/Earth-Free-Download-PNG.png';
left2++;
requestAnimationFrame(render2);
}
canvas {
display: block;
}
It works, but old images are not deleted:
<canvas id="canvas1" height="250" width="500"></canvas>
It doesn't work, because of clearRect():
<canvas id="canvas2" height="250" width="500"></canvas>
if you try to animate your image , its not necessary to make two canvas instead use a timer , i hope this will help
`
var left1 = 0;
var context1 = document.getElementById('canvas1').getContext('2d');
var canvas1 = document.getElementById('canvas1');
window.onload = init;
function init() {
setInterval(drawc, 1000 / 60);
};
function drawc() {
if (left1 > canvas1.width) {
left1 = 0;
}
render1();
}
function render1() {
with(context1) {
clearRect(0, 0, canvas1.width, canvas1.height);
var image = new Image();
image.src = 'http://www.pngall.com/wp-content/uploads/2016/06/Earth-Free-Download-PNG.png';
beginPath();
drawImage(image, left1, 0, 200, 200);
closePath();
fill();
left1++;
// requestAnimationFrame(render1);
}
};

how to move rotated canvas horizontally?

i want to move html canvas horizontally, then rotate it, and then again move it horizontally. problem is, that after i rotate it and want to move it again, rotation dissapear. what i am doing wrong ? thanks, my code is below
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title></title>
</head>
<body>
<style type="text/css">
#canvas {
width:400px;
height:400px;
border:1px solid red;
}
</style>
<canvas id="canvas"></canvas>
<script type="text/javascript">
var c=document.getElementById("canvas");
var ctx=c.getContext("2d");
var counterx = 0;
var canvasWidth = 400;
var canvasHeight = 400;
var imageObj = new Image();
imageObj.onload = function() {
ctx.drawImage(imageObj, counterx,0 ,69, 50);
};
imageObj.src = 'test.png';
function moveRight() {
ctx.save();
counterx += 5;
ctx.clearRect(0 ,0 ,canvasWidth, canvasHeight);
ctx.drawImage(imageObj, counterx,0 ,69, 50);
ctx.restore();
}
function rotate() {
ctx.save();
ctx.translate(counterx, 0);
ctx.rotate(Math.PI / 4);
ctx.clearRect(0 ,0 ,canvasWidth, canvasHeight);
ctx.drawImage(imageObj, counterx,0 ,69, 50);
ctx.restore();
}
</script>
<a onclick="moveRight(); return false;" href="#">move right</a>
<a onclick="rotate(); return false;" href="#">rotate</a>
</body>
</html>
I would recommend accumulating the values, then do an absolute transform only when needed. A little refactoring can also make it easier to track these changes, here that would be to use a common update method.
For example:
var rotation = 0;
var counterx = 0;
function moveRight() {
counterx += 5;
update();
}
function rotate() {
rotation += Math.PI / 4
update();
}
function update() {
ctx.clearRect(0 ,0 ,canvasWidth, canvasHeight);
ctx.translate(counterx, 0); // absolute translate
ctx.rotate(rotation); // absolute rotation
ctx.drawImage(imageObj, 0, 0, 69, 50); // we are already at counterx
ctx.setTransform(1, 0, 0, 1, 0, 0); // reset all transformations
}
And if you want to rotate by image's center, just replace the drawImage line above with:
ctx.drawImage(imageObj, -69/2, -50/2, 69, 50);
Live demo
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
var canvasWidth = 400;
var canvasHeight = 400;
var imageObj = new Image();
var rotation = 0;
var counterx = 0;
c.width = canvasWidth;
c.height = canvasHeight;
imageObj.onload = update;
imageObj.src = 'http://i.imgur.com/mP58PXJ.png';
function moveRight() {
counterx += 5;
update();
}
function rotate() {
rotation += Math.PI / 4
update();
}
function update() {
var iw = imageObj.width, ih = imageObj.height;
ctx.clearRect(0, 0, canvasWidth, canvasHeight);
ctx.translate(counterx, ih); // absolute translate
ctx.rotate(rotation); // absolute rotation
ctx.drawImage(imageObj, -iw*0.5, -ih*0.5); // we are already at counterx
ctx.setTransform(1, 0, 0, 1, 0, 0); // reset all transformations
}
#canvas {
width: 400px;
height: 400px;
border: 1px solid red;
}
<canvas id="canvas"></canvas>
<a onclick="moveRight(); return false;" href="#">move right</a>
<a onclick="rotate(); return false;" href="#">rotate</a>

canvas image size in html5

var canvas = document.getElementById("canvasPnl");
var context = canvas.getContext('2d');
var locationtxt = "Latitude: " + position.coords.latitude + ", Longitude: " + position.coords.longitude;
var imageObj = new Image();
imageObj.src = document.getElementById("tempImg").src;
imageObj.onload = function () {
var x = 188;
var y = 30;
var width = 200;
var height = 137;
context.drawImage(imageObj, x, y, width, height);
context.font = "20pt Calibri";
context.fillText(locationtxt, 40, 40);
};
<canvas id="canvasPnl" width="132" height="120" style="border:0px solid #d3d3d3;"></canvas>
The size of the image is becoming bigger and it is not fitting in canvas and also the image is rotated.
How to get original image in canvas?
Ok, take a look at your reworked code below.
Notice "imageObj.src = document.getElementById("tempImg").src;" must go after imageObj.onload.
I have no access to your locationtxt or your tempImg, so I assume you are sure they are not the source of your problem.
This line of code will take an image of ANY size and force it to fit in your specified canvas size by scaling it. When it scales, you may get image distortion if your canvas size is not proportional to your image size.
context.drawImage(imageObj,0,0,imageObj.width,imageObj.height,0,0,canvas.width,canvas.height);
Here is your code -- just modified a bit :)
var canvas = document.getElementById("canvasPnl");
var context = canvas.getContext('2d');
var locationtxt = "Latitude: " + position.coords.latitude + ", Longitude: " + position.coords.longitude;
var imageObj = new Image();
imageObj.onload = function () {
context.drawImage(imageObj,0,0,imageObj.width,imageObj.height,0,0,canvas.width,canvas.height);
context.font = "20pt Calibri";
context.fillText(locationtxt, 40, 40);
};
imageObj.src = document.getElementById("tempImg").src;
<html>
<head>
<title></title>
</head>
<style type="text/css">
#mycanvas
{
border: 1px solid black;
}
</style>
<script type="text/javascript">
window.addEventListener('load', function () {
var img = new Image, ctx = document.getElementById('myCanvas').getContext('2d');
var img1=new Image;
img.src = 'ship.png';
img1.src='3D025.jpg';
img.addEventListener('load', function () {
var width = img.naturalWidth; // this will be 300
var height = img.naturalHeight; // this will be 400
var interval = setInterval(function() {
var x = 260, y = 0;
return function () {
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
ctx.drawImage(img1, 0, y);
ctx.drawImage(img, x, 300,width,height);
x += 1;
if (x > ctx.canvas.width) {
x = 260;
width=width-10;
height=height-10;
ctx.drawImage(img, x, 300,width,height);
}
if (x == 750) {
x = 260;
}
};
}(), 1000/40);
}, false);
}, false);
</script>
<body>
<canvas id="myCanvas" height="600" width="1000"></canvas>
</body>
</html>

Categories