I want to animate a ball using html5 and i implemented this small script . However, I cannot see any animation .. How do I fix this ?
<html>
<head>
<meta charset="utf-8">
<script>
canvas = document.getElementById("canvas");
window.onload=function(){
if (document.createElement("canvas").getContext){
//alert("browser supports canvas");
//console.log(document.getElementById("canvas").getContext);
canvas = document.getElementById("canvas");
shape = new shapes();
shape.drawball(canvas,100,"red");
}
};
function shapes(){
this.drawtriangle = function(canvas){
triangles = new triangle(0,0,0,200,200,200);
triangles.draw(canvas.getContext('2d'));
}
this.drawball = function(canvas,radius,color) {
ball = new Ball(radius,color);
ball.draw(canvas.getContext('2d'),canvas);
}
}
function coordinates(x1,y1){
this.x = x1;
this.y = y1;
}
function angle(angle,speed){
this.angle = angle;
this.speed = speed;
}
function Ball(radius,color){
this.origin = new coordinates(100,100);
this.radius = (radius === "undefined" ) ? 40 : radius;
this.color = (color === "undefined") ? red : color;
this.rotation = 0;
this.index = 0;
this.angles = new angle(0,0.2);
}
Ball.prototype.draw = function(context,canvas){
context.fillStyle = this.color;
context.strokeStyle = "blue";
context.rotate(this.rotation);
context.beginPath();
context.arc(this.origin.x,this.origin.y,this.radius,0,(Math.PI*2),true)
context.closePath();
context.fill();
context.stroke();
this.animate(context,canvas);
}
Ball.prototype.animate = function(context,canvas){
if (this.angles.angle < 1){
context.clearRect(0,0,1000,1000);
console.log("Animating ... ");
this.origin.x = this.origin.x + 10;
this.origin.y = this.origin.y + 10;
this.angles.angle = this.angles.angle + this.angles.speed;
window.requestAnimationFrame(this.draw(context));
}
}
</script>
<style>
body {
background-color: #bbb;
}
#canvas {
background-color: #fff;
}
</style>
</head>
<body>
<canvas id="canvas" width="1000px" height="1000px">
Your browser dows bot suppoet canvas
</canvas>
</body>
</html>
Your call to requestAnimationFrame() is not passing a callback, it's executing a function and passing its return value which is undefined. I would suggest you change this:
Ball.prototype.animate = function(context,canvas) {
if (this.angles.angle < 1) {
context.clearRect(0,0,1000,1000);
console.log("Animating ... ");
this.origin.x = this.origin.x + 10;
this.origin.y = this.origin.y + 10;
this.angles.angle = this.angles.angle + this.angles.speed;
window.requestAnimationFrame(this.draw(context));
}
}
to this:
Ball.prototype.animate = function(context,canvas) {
if (this.angles.angle < 1) {
context.clearRect(0,0,1000,1000);
console.log("Animating ... ");
this.origin.x = this.origin.x + 10;
this.origin.y = this.origin.y + 10;
this.angles.angle = this.angles.angle + this.angles.speed;
var self = this;
window.requestAnimationFrame(function() {self.draw(context)});
}
}
so that you pass an appropriate callback function to requestAnimationFrame().
Now that you've included all the code, here is another issue. You can't do this:
canvas = document.getElementById("canvas");
in javascript in the head tag because the DOM is not yet loaded so it will not find that object. You must do that only when the DOM has been loaded either by waiting for an event that signifies the DOM has been loaded or by running the javascript at the every end of the <body> section AFTER all DOM elements.
Then, thirdly, you have to use the browser-specific form of requestAnimationFrame since each browser may have it's own prefix. I used this code:
var reqestAnimationFrame =
window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.msRequestAnimationFrame ||
window.webkitRequestAnimationFrame;
When I put your script into a jsFiddle and make the above changes, what I find is that the animation runs so quickly that it isn't seen. Your code will need to add a time element to it so that the animation runs over a particular time period. Usually this is done by defining a duration for the animation and at each animation step, you scale the position of the animation based on what percentage of the duration has elapsed.
Here's an example of a time-based animation using requestAnimationFrame: http://jsfiddle.net/jfriend00/nRE7S/
Related
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#canvasOne
{
border: 1px solid black;
}
</style>
<script src="http://code.jquery.com/jquery-1.10.2.js" type="text/javascript"></script>
</head>
<body>
<div align="center">
<canvas id="canvasOne">
</canvas>
</div>
<script type="text/javascript">
var myCanvas = document.getElementById("canvasOne");
var myContext = myCanvas.getContext("2d");
var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
init();
var numShapes;
var shapes;
var dragIndex;
var dragging;
var mouseX;
var mouseY;
var dragHoldX;
var dragHoldY;
var timer;
var targetX;
var targetY;
var easeAmount;
var bgColor;
var nodes;
var colorArr;
function init()
{
myCanvas.width = $(window).width() - 200;
myCanvas.height = $(window).height() - 200;
shapes = [];
nodes = ["0;Person;24828760;Alok Kumar;Gorakhpur;#F44336;28",
"0;Suspect;04/Dec/2016;4;Suman_Biswas;#3F51B5;20","1;Rule;4;Apparent Means;3 Parameter;#EEFF41;20",
"0;Policy;36QA649749;In-Force;Quarterly;#FF9800;20","3;Product;Pension;Saral Pension;SRPEN;#795548;20","3;Payment;Cheque;Realized;Lucknow;#0091EA;20",
"0;Policy;162348873;Lapsed;Quarterly;#FF9800;20","6;Product;Pension;Life-Long Pension;LLPP;#795548;20","6;Payment;Cheque;Realized;Gorakhpur;#0091EA;20",
"0;Policy;1EQF178639;Lapsed;Monthly;#FF9800;20","9;Product;Life;Shield;SHIELDA;#795548;20","9;Payment;Demand Draft;Realized;Lucknow;#0091EA;20"];
numShapes = nodes.length;
makeShapes();
drawScreen();
myCanvas.addEventListener("mousedown", mouseDownListener, false);
}
//drawing
function makeShapes()
{
var tempX;
var tempY;
for(var i = 0; i < numShapes; i++)
{
var centerX = myCanvas.width/2;
var centerY = myCanvas.height/2;
var nodeColor = nodes[i].split(";")[5];
var nodeRadius = nodes[i].split(";")[6];
var nodeConnect = nodes[i].split(";")[0];
if(i == 0)//center of circle
{
tempX = centerX
tempY = centerY;
}
else
{
//tempX = Math.random() * (myCanvas.width - tempRadius);
//tempY = Math.random() * (myCanvas.height - tempRadius);
//var x = x0 + r * Math.cos(2 * Math.PI * i / items);
//var y = y0 + r * Math.sin(2 * Math.PI * i / items);
//250 is the distance from center node to outside nodes it can be actual radius in degrees
tempX = shapes[nodeConnect].x + 300 * Math.cos(2 * Math.PI * i / numShapes);
tempY = shapes[nodeConnect].y + 300 * Math.sin(2 * Math.PI * i / numShapes);
}
tempShape = {x: tempX, y: tempY, rad: nodeRadius, color: nodeColor, text: nodes[i]};
shapes.push(tempShape);
}
}
//drawing both shape (line and circle) and screen
function drawScreen()
{
myContext.fillStyle = "#ffffff";
myContext.fillRect(0, 0, myCanvas.width, myCanvas.height);
drawShapes();
}
function drawShapes()
{
//line
for(var i = 1; i < numShapes; i++)
{
myContext.beginPath();
myContext.strokeStyle = "#B2B19D";
var nodeConnect = nodes[i].split(";")[0];
myContext.moveTo(shapes[nodeConnect].x, shapes[nodeConnect].y);
myContext.lineTo(shapes[i].x, shapes[i].y);
myContext.stroke();
}
//circle
for(var i = 0; i < numShapes; i++)
{
myContext.fillStyle = shapes[i].color;
myContext.beginPath();
myContext.arc(shapes[i].x, shapes[i].y, shapes[i].rad, 0, 2*Math.PI, false);
myContext.closePath();
myContext.fill();
}
//text
for(var i = 0; i < numShapes; i++)
{
myContext.beginPath();
myContext.font = '10pt Arial';
myContext.fillStyle = 'black';
var textarr = shapes[i].text.split(";");
myContext.fillText(textarr[1], shapes[i].x + 30, shapes[i].y - 24);
/*myContext.fillText(textarr[2], shapes[i].x + 30, shapes[i].y + 1);
myContext.fillText(textarr[3], shapes[i].x + 30, shapes[i].y + 22);
myContext.fillText(textarr[4], shapes[i].x + 30, shapes[i].y + 44);*/
myContext.closePath();
myContext.fill();
}
}
//animation
function mouseDownListener(evt)
{
var highestIndex = -1;
var bRect = myCanvas.getBoundingClientRect();
mouseX = (evt.clientX - bRect.left) * (myCanvas.width/bRect.width);
mouseY = (evt.clientY - bRect.top) * (myCanvas.height/bRect.height);
for(var i = 0; i < numShapes; i++)
{
if(hitTest(shapes[i], mouseX, mouseY))
{
dragging = true;
if(i > highestIndex)
{
dragHoldX = mouseX - shapes[i].x;
dragHoldY = mouseY - shapes[i].y;
highestIndex = i;
dragIndex = i;
}
}
}
if(dragging)
{
window.addEventListener("mousemove", mouseMoveListener, false);
}
myCanvas.removeEventListener("mousedown", mouseDownListener, false);
window.addEventListener("mouseup", mouseUpListener, false);
if(evt.preventDefault)
{
evt.preventDefault;
}
return false;
}
function mouseMoveListener(evt)
{
var shapeRad = shapes[dragIndex].rad;
var minX = shapeRad;
var maxX = myCanvas.width - shapeRad;
var minY = shapeRad;
var maxY = myCanvas.height - shapeRad;
//get mouse position correctly
var bRect = myCanvas.getBoundingClientRect();
mouseX = (evt.clientX - bRect.left)*(myCanvas.width / bRect.width);
mouseY = (evt.clientY - bRect.top)*(myCanvas.height / bRect.height);
//clamp x and y position to prevent object from dragging outside canvas
posX = mouseX - dragHoldX;
posX = (posX < minX) ? minX : ((posX > maxX) ? maxX : posX);
posY = mouseY - dragHoldY;
posY = (posY < minY) ? minY : ((posY > maxY) ? maxY : posY);
shapes[dragIndex].x = posX;
shapes[dragIndex].y = posY;
drawScreen();
}
function mouseUpListener(evt)
{
myCanvas.addEventListener("mousedown", mouseDownListener, false);
window.removeEventListener("mouseup", mouseUpListener, false);
if(dragging)
{
dragging = false;
window.removeEventListener("mousemove", mouseMoveListener, false);
}
}
function hitTest(shape, mx, my)
{
var dx = mx - shape.x;
var dy = my - shape.y;
return(dx * dx + dy * dy < shape.rad * shape.rad);
}
</script>
</body>
</html>
The following canvas animation creates nodes and edges. However due
to space constraint, some of the nodes are not visible due to canvas
height and width. Even adding overflow css to canvas dosen't help as
i am not able to scroll.
<canvas> context doesn't have a built-in scroll method.
You then have multiple ways to circumvent this limitation.
The first one, is as in #markE's answer, to scale your context's matrix so that your drawings fit into the required space. You could also refactor your code so that all coordinates are relative to the canvas size.
This way, you won't need scrollbars and all your drawings will just be scaled appropriately, which is the desirable behavior in most common cases.
But if you really need to have some scrolling feature, here are some ways :
The easiest and most recommended one : let the browser handle it.
You will have to set the size of your canvas to the maximum of your drawings, and wrap it in an other element which will scroll. By setting the overflow:auto css property on the container, our scrollbars appear and we have our scrolling feature.
In following example, the canvas is 5000px wide and the container 200px.
var ctx = canvas.getContext('2d');
ctx.textAlign = 'center';
for (var w = 0; w < canvas.width; w += 100) {
for (var h = 0; h < canvas.height; h += 100) {
ctx.fillText(w + ',' + h, w, h);
}
}
#container {
width: 200px;
height: 200px;
overflow: auto;
border: 1px solid;
}
canvas{
display: block;
}
<div id="container">
<canvas id="canvas" height="5000" width="5000"></canvas>
</div>
Main advantages :
easily implemented.
users are used to these scrollbars.
Main caveats :
You're limited by canvas maximum sizes.
If your canvas is animated, you'll also draw for each frame parts of the canvas that aren't visible.
You have small control on scrollbars look and you'll still have to implement drag-to-scroll feature yourself for desktop browsers.
A second solution, is to implement this feature yourself, using canvas transform methods : particularly translate, transform and setTransform.
Here is an example :
var ctx = canvas.getContext('2d');
var app = {};
// the total area of our drawings, can be very large now
app.WIDTH = 5000;
app.HEIGHT = 5000;
app.draw = function() {
// reset everything (clears the canvas + transform + fillStyle + any other property of the context)
canvas.width = canvas.width;
// move our context by the inverse of our scrollbars' left and top property
ctx.setTransform(1, 0, 0, 1, -app.scrollbars.left, -app.scrollbars.top);
ctx.textAlign = 'center';
// draw only the visible area
var visibleLeft = app.scrollbars.left;
var visibleWidth = visibleLeft + canvas.width;
var visibleTop = app.scrollbars.top
var visibleHeight = visibleTop + canvas.height;
// you probably will have to make other calculations than these ones to get your drawings
// to draw only where required
for (var w = visibleLeft; w < visibleWidth + 50; w += 100) {
for (var h = visibleTop; h < visibleHeight + 50; h += 100) {
var x = Math.round((w) / 100) * 100;
var y = Math.round((h) / 100) * 100;
ctx.fillText(x + ',' + y, x, y);
}
}
// draw our scrollbars on top if needed
app.scrollbars.draw();
}
app.scrollbars = function() {
var scrollbars = {};
// initial position
scrollbars.left = 0;
scrollbars.top = 0;
// a single constructor for both horizontal and vertical
var ScrollBar = function(vertical) {
var that = {
vertical: vertical
};
that.left = vertical ? canvas.width - 10 : 0;
that.top = vertical ? 0 : canvas.height - 10;
that.height = vertical ? canvas.height - 10 : 5;
that.width = vertical ? 5 : canvas.width - 10;
that.fill = '#dedede';
that.cursor = {
radius: 5,
fill: '#bababa'
};
that.cursor.top = vertical ? that.cursor.radius : that.top + that.cursor.radius / 2;
that.cursor.left = vertical ? that.left + that.cursor.radius / 2 : that.cursor.radius;
that.draw = function() {
if (!that.visible) {
return;
}
// remember to reset the matrix
ctx.setTransform(1, 0, 0, 1, 0, 0);
// you can give it any shape you like, all canvas drawings operations are possible
ctx.fillStyle = that.fill;
ctx.fillRect(that.left, that.top, that.width, that.height);
ctx.beginPath();
ctx.arc(that.cursor.left, that.cursor.top, that.cursor.radius, 0, Math.PI * 2);
ctx.fillStyle = that.cursor.fill;
ctx.fill();
};
// check if we're hovered
that.isHover = function(x, y) {
if (x >= that.left - that.cursor.radius && x <= that.left + that.width + that.cursor.radius &&
y >= that.top - that.cursor.radius && y <= that.top + that.height + that.cursor.radius) {
// we are so record the position of the mouse and set ourself as the one hovered
scrollbars.mousePos = vertical ? y : x;
scrollbars.hovered = that;
that.visible = true;
return true;
}
// we were visible last call and no wheel event is happening
else if (that.visible && !scrollbars.willHide) {
that.visible = false;
// the app should be redrawn
return true;
}
}
return that;
};
scrollbars.horizontal = ScrollBar(0);
scrollbars.vertical = ScrollBar(1);
scrollbars.hovered = null;
scrollbars.dragged = null;
scrollbars.mousePos = null;
// check both of our scrollbars
scrollbars.isHover = function(x, y) {
return this.horizontal.isHover(x, y) || this.vertical.isHover(x, y);
};
// draw both of our scrollbars
scrollbars.draw = function() {
this.horizontal.draw();
this.vertical.draw();
};
// check if one of our scrollbars is visible
scrollbars.visible = function() {
return this.horizontal.visible || this.vertical.visible;
};
// hide it...
scrollbars.hide = function() {
// only if we're not using the mousewheel or dragging the cursor
if (this.willHide || this.dragged) {
return;
}
this.horizontal.visible = false;
this.vertical.visible = false;
};
// get the area's coord relative to our scrollbar
var toAreaCoord = function(pos, scrollBar) {
var sbBase = scrollBar.vertical ? scrollBar.top : scrollBar.left;
var sbMax = scrollBar.vertical ? scrollBar.height : scrollBar.width;
var areaMax = scrollBar.vertical ? app.HEIGHT - canvas.height : app.WIDTH - canvas.width;
var ratio = (pos - sbBase) / (sbMax - sbBase);
return areaMax * ratio;
};
// get the scrollbar's coord relative to our total area
var toScrollCoords = function(pos, scrollBar) {
var sbBase = scrollBar.vertical ? scrollBar.top : scrollBar.left;
var sbMax = scrollBar.vertical ? scrollBar.height : scrollBar.width;
var areaMax = scrollBar.vertical ? app.HEIGHT - canvas.height : app.WIDTH - canvas.width;
var ratio = pos / areaMax;
return ((sbMax - sbBase) * ratio) + sbBase;
}
scrollbars.scroll = function() {
// check which one of the scrollbars is active
var vertical = this.hovered.vertical;
// until where our cursor can go
var maxCursorPos = this.hovered[vertical ? 'height' : 'width'];
var pos = vertical ? 'top' : 'left';
// check that we're not out of the bounds
this.hovered.cursor[pos] = this.mousePos < 0 ? 0 :
this.mousePos > maxCursorPos ? maxCursorPos : this.mousePos;
// seems ok so tell the app we scrolled
this[pos] = toAreaCoord(this.hovered.cursor[pos], this.hovered);
// redraw everything
app.draw();
}
// because we will hide it after a small time
scrollbars.willHide;
// called by the wheel event
scrollbars.scrollBy = function(deltaX, deltaY) {
// it's not coming from our scrollbars
this.hovered = null;
// we're moving horizontally
if (deltaX) {
var newLeft = this.left + deltaX;
// make sure we're in the bounds
this.left = newLeft > app.WIDTH - canvas.width ? app.WIDTH - canvas.width : newLeft < 0 ? 0 : newLeft;
// update the horizontal cursor
this.horizontal.cursor.left = toScrollCoords(this.left, this.horizontal);
// show our scrollbar
this.horizontal.visible = true;
}
if (deltaY) {
var newTop = this.top + deltaY;
this.top = newTop > app.HEIGHT - canvas.height ? app.HEIGHT - canvas.height : newTop < 0 ? 0 : newTop;
this.vertical.cursor.top = toScrollCoords(this.top, this.vertical);
this.vertical.visible = true;
}
// if we were called less than the required timeout
clearTimeout(this.willHide);
this.willHide = setTimeout(function() {
scrollbars.willHide = null;
scrollbars.hide();
app.draw();
}, 500);
// redraw everything
app.draw();
};
return scrollbars;
}();
var mousedown = function(e) {
// tell the browser we handle this
e.preventDefault();
// we're over one the scrollbars
if (app.scrollbars.hovered) {
// new promotion ! it becomes the dragged one
app.scrollbars.dragged = app.scrollbars.hovered;
app.scrollbars.scroll();
}
};
var mousemove = function(e) {
// check the coordinates of our canvas in the document
var rect = canvas.getBoundingClientRect();
var x = e.clientX - rect.left;
var y = e.clientY - rect.top;
// we're dragging something
if (app.scrollbars.dragged) {
// update the mouse position
app.scrollbars.mousePos = app.scrollbars.dragged.vertical ? y : x;
app.scrollbars.scroll();
} else if (app.scrollbars.isHover(x, y)) {
// something has changed, redraw to show or hide the scrollbar
app.draw();
}
e.preventDefault();
};
var mouseup = function() {
// we dropped it
app.scrollbars.dragged = null;
};
var mouseout = function() {
// we're out
if (app.scrollbars.visible()) {
app.scrollbars.hide();
app.scrollbars.dragged = false;
app.draw();
}
};
var mouseWheel = function(e) {
e.preventDefault();
app.scrollbars.scrollBy(e.deltaX, e.deltaY);
};
canvas.addEventListener('mousemove', mousemove);
canvas.addEventListener('mousedown', mousedown);
canvas.addEventListener('mouseup', mouseup);
canvas.addEventListener('mouseout', mouseout);
canvas.addEventListener('wheel', mouseWheel);
range.onchange = function() {
app.WIDTH = app.HEIGHT = this.value;
app.scrollbars.left = 0;
app.scrollbars.top = 0;
app.draw();
};
// an initial drawing
app.draw();
canvas {border: 1px solid;}
span{font-size: .8em;}
<canvas id="canvas" width="200" height="150"></canvas>
<span>
change the total area size
<input type="range" min="250" max="5000000" steps="250" value="5000" id="range" />
</span>
Main advantages :
no limitation for the size of your drawing areas.
you can customize your scrollbars as you wish.
you can control when the scrollbars are enable or not.
you can get the visible area quite easily.
Main caveats:
a bit more code than the CSS solution...
no really, that's a lot of code...
A third way I wrote some time ago for an other question took advantage of the ability to draw an other canvas with ctx.drawImage(). It has its own caveats and advantages, so I let you pick the one you need, but this last one also had a drag and slide feature which can be useful.
So your node drawings don't fit on the canvas size?
You can easily "shrink" your content to fit the visible canvas with just 1 command!
The context.scale(horizontalRescale,verticalRescale) command will shrink every following drawing by your specified horizontalRescale & verticalRescale percentages.
An Important note: You must make horizontalRescale,verticalRescale the same value or your content will be distorted.
The nice thing about using context.scale is that you don't have to change any of the code that draws your nodes ... canvas automatically scales all those nodes for you.
For example, this code will shrink your nodes to 80% of their original size:
var downscaleFactor= 0.80;
context.scale( downscaleFactor, downscaleFactor );
Rather than go through your 200+ lines of code, I leave it to you to calculate downscaleFactor.
EDIT: solution some lines above.
I'm trying to have bouncing pictures with html5, canvas and some jQuery.
I've successfully made some balls bouncing, but I can't figure out how to draw pictures instead of simple 'particles'.
I've tried in different ways, but actually I think I'missing something.
I post the whole html so you can just copy/paste it easily.
Under my try there is a commented section with working bouncing balls.
Thank you so much!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>HTML5 Canvas Explode Demo</title>
<link rel="stylesheet" href="styles.css" />
<meta name="viewport" content="width=320 initial-scale=1.0, user-scalable=no" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<style type="text/css">
* {
margin: 0; padding: 0;
}
html, body {
width: 100%;
height: 100%;
}
canvas {
display: block;
background: whiteSmoke;
width: 100%;
height: 100%;
}
#presentation{
position: fixed;
background: rgba(0,0,0,0.7);
width: 100%;
height: 70px;
box-shadow: 7px 7px 13px rgba(0,0,0,0.3);
color: white;
font-family:futura;
font-size: 30px;
padding-left: 50px;
padding-top: 10px;
}
</style>
</head>
<body>
<div id="presentation">Bouncing Baaaaalls!</div>
<canvas id="output" ></canvas>
<script type="text/javascript">
(function() {
window.requestAnimationFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.msRequestAnimationFrame||window.oRequestAnimationFrame||function(f){window.setTimeout(f,40/60)
}}});
var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');
function Particle() {
var W = canvas.width = window.innerWidth;
var H = canvas.height = window.innerHeight;
this.radius = 20;
this.x = parseInt(Math.random() * W);
this.y = H;
this.color = 'rgb(' +
parseInt(Math.random() * 255) + ',' +
parseInt(Math.random() * 255) + ',' +
parseInt(Math.random() * 255) + ')';
if (this.x > W/2 ){
this.vx = Math.random() * (-15 - -5) + -5;
}else{
this.vx = Math.random() * (15 - 5) + 5;
}
this.vy = Math.random() * (-32 - -25) + -25;
this.draw = function() {
var img = new Image();
img.src = 'troll1.png';
ctx.beginPath();
ctx.fillStyle = "rgb(255,255,255)";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.closePath();
ctx.beginPath();
ctx.arc(this.x, this.y, 20, 0, 6.28, false);
ctx.clip();
ctx.stroke();
ctx.closePath();
ctx.drawImage(img, 0, 0);
// WORKING PARTICLES STARTS HERE
// ctx.fillStyle = this.color;
// ctx.beginPath();
// ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2, false);
// ctx.fill();
// ctx.closePath();
// WORKING PARTICLES ENDS HERE
};
}
var particle_count = 20;
var particles = [];
// Now lets quickly create our particle
// objects and store them in particles array
for (var i = 0; i < particle_count; i++) {
var particle = new Particle();
particles.push(particle);
}
function renderFrame() {
requestAnimationFrame(renderFrame);
// Clearing screen to prevent trails
var W = canvas.width = window.innerWidth;
var H = canvas.height = window.innerHeight;
ctx.clearRect(0, 0, W, H);
particles.forEach(function(particle) {
// The particles simply go upwards
// It MUST come down, so lets apply gravity
particle.vy += 1;
// Adding velocity to x and y axis
particle.x += particle.vx;
particle.y += particle.vy;
// We're almost done! All we need to do now
// is to reposition the particles as soon
// as they move off the canvas.
// We'll also need to re-set the velocities
if (
// off the right side
particle.x + particle.radius > W ||
// off the left side
particle.x - particle.radius < 0 ||
// off the bottom
particle.y + particle.radius > H
) {
// If any of the above conditions are met
// then we need to re-position the particles
// on the base :)
// If we do not re-set the velocities then
// the particles will stick to base :D
// Velocity X
particle.x = parseInt(Math.random() * W);
particle.y = H;
if (particle.x > W/2 ){
particle.vx = Math.random() * (-15 - -5) + -5;
}else{
particle.vx = Math.random() * (15 - 5) + 5;
}
particle.vy = Math.random() * (-32 - -28) + -28;
}
particle.draw();
});
}
$(document).ready(function(){
renderFrame();
});
</script>
</body>
</html>
EDIT WITH SOLUTION:
First, thanks to markE
I edited the code as he said, the problem was actually about timing (and understanding what I was doing). His answer really helped me a lot.
The image was not moving because I didn't told it to do that actually ( with ctx.drawImage(img, this.x, this.y)).
NOTE: For debugging canvas rendering with chrome take a look at HTML5 canvas inspector?
So here is the working (and ultra commented, thanks for the lesson markE) code for bouncing troll faces (put a troll1.png picture in the same folder):
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>HTML5 Canvas Explode Demo</title>
<!-- <link rel="stylesheet" href="styles.css" /> --> <meta name="viewport" content="width=320 initial-scale=1.0, user-scalable=no" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<style type="text/css">
* {
margin: 0; padding: 0;
}
html, body {
width: 100%;
height: 100%;
}
canvas {
display: block;
background: whiteSmoke;
width: 100%;
height: 100%;
}
#presentation{
position: fixed;
background: rgba(0,0,0,0.7);
width: 100%;
height: 70px;
box-shadow: 7px 7px 13px rgba(0,0,0,0.3);
color: white;
font-family:futura;
font-size: 30px;
padding-left: 50px;
padding-top: 10px;
}
</style>
</head>
<body>
<div id="presentation">Bouncing Baaaaalls!</div>
<canvas id="output" ></canvas>
<script type="text/javascript">
(function() {
//define the animation refresh (frame rendering) with built-in browser timing
window.requestAnimationFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.msRequestAnimationFrame||window.oRequestAnimationFrame||function(f){window.setTimeout(f,40/60)
}}});
//define some variables: canvas, context, img to put inside the context and an array of bouncing objects
var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');
var img = new Image();
//IMPORTANT: Wait for the picture to be loaded!
img.onload = function(){
alert('troll1 is LOADED.');
beginAnimation();
};
//yes, the src goes after
img.src = 'troll1.png';
//how many bouncing objects?
var particle_count = 4;
var particles = [];
var particle;
function Particle() {
//define properties of a bouncing object, such as where it start, how fast it goes
var W = canvas.width = window.innerWidth;
var H = canvas.height = window.innerHeight;
this.radius = 20;
this.x = parseInt(Math.random() * W);
this.y = H;
//Uncomment for coloured particles:
// this.color = 'rgb(' +
// parseInt(Math.random() * 255) + ',' +
// parseInt(Math.random() * 255) + ',' +
// parseInt(Math.random() * 255) + ')';
//end coloured particles
if (this.x > W/2 ){
this.vx = Math.random() * (-15 - -5) + -5;
}else{
this.vx = Math.random() * (15 - 5) + 5;
}
this.vy = Math.random() * (-32 - -25) + -25;
//we will call this function to actually draw the bouncing object at EVERY FRAME
this.draw = function() {
// Bouncing pictures were not bouncing because there were no this.x this.y . Shame on me.
ctx.drawImage(img,this.x,this.y);
// WORKING PARTICLES STARTS HERE
// ctx.fillStyle = this.color;
// ctx.beginPath();
// ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2, false);
// ctx.fill();
// ctx.closePath();
//WORKING PARTICLES ENDS HERE
};
}
function renderFrame() {
//RENDER THE PARTICLEEEEEEES!
requestAnimationFrame(renderFrame);
// Clearing screen to prevent trails
var W = canvas.width = window.innerWidth;
var H = canvas.height = window.innerHeight;
ctx.clearRect(0, 0, W, H);
particles.forEach(function(particle) {
// The bouncing objects simply go upwards
// It MUST come down, so lets apply gravity
particle.vy += 1;
// Adding velocity to x and y axis
particle.x += particle.vx;
particle.y += particle.vy;
// We're almost done! All we need to do now
// is to reposition the bouncing objects as soon
// as they move off the canvas.
// We'll also need to re-set the velocities
if (
// off the right side
particle.x + particle.radius > W ||
// off the left side
particle.x - particle.radius < 0 ||
// off the bottom
particle.y + particle.radius > H
) {
// If any of the above conditions are met
// then we need to re-position the bouncing objects
// on the base :)
// If we do not re-set the velocities then
// the bouncing objects will stick to base :D
// Velocity X
particle.x = parseInt(Math.random() * W);
particle.y = H;
if (particle.x > W/2 ){
particle.vx = Math.random() * (-15 - -5) + -5;
}else{
particle.vx = Math.random() * (15 - 5) + 5;
}
particle.vy = Math.random() * (-32 - -28) + -28;
}
particle.draw();
});
}
function beginAnimation(){
//create the particles and start to render them
for (var i = 0; i < particle_count; i++) {
particle = new Particle();
particles.push(particle);
}
//BOUNCE MOFOS!
renderFrame();
}
</script>
You're not waiting for troll1.png to load before trying to draw it.
Var img=new Image();
img.onload=function(){
beginMyAnimation();
}
img.src=”troll1”;
alert(“troll1 is not loaded yet.”);
function beginAnimation(){
….
ctx.drawImage(img,0,0);
….
}
The order of execution is like this:
First var img=new Image().
Javascript creates a new image object and puts a reference in img.
Second img.onload….
Javascript doesn’t execute this code yet. It just takes note that onload must be executed after troll1.jpg has successfully been loaded into the new image object.
Third img.src=”something.jpg”.
Javascript immediately begins loading troll1.jpg.
Since loading will take a while, Javascript also continues executing any code that follows.
Fourth alert(“Image is not loaded yet.”);
Javascript displays this alert message. Note that troll1.jpg has not been loaded yet. Therefore, any code that tried to use the image now would fail—no image yet!
Fifth img.onload.
Javascript has finally fully loaded troll1.jpg so it executes the onload function.
Sixth beginMyAnimation()
Javascript will finally execute beginAnimation(). At this point any code that tries to use the image will succeed. You can do ctx.drawImage(img,0,0) will succeed now.
So rearrange all your setup code inside in beginAnimation(). Finally, put renderFrame() last in beginAnimation().
I am trying to animate a circle across the canvas in diagonal direction. I am using requestanimationframe. It works smoothly in all browsers but not in firefox. There is constant flickering while the animation is going on. Please someone tell me what wrong I am doing. I need smooth animatin with atleast reasonable speed in firefox.
Here is my simple code, maybe someone can point out what I am missing here..:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
/*html { background: #000; }*/
</style>
<title>Test</title>
</head>
<body>
<script type="text/javascript">
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(/* function */ callback, /* DOMElement */ element){
window.setTimeout(callback, 1000 / 60);
};
})();
window.cancelRequestAnimFrame = ( function() {
return window.cancelAnimationFrame ||
window.webkitCancelRequestAnimationFrame ||
window.mozCancelRequestAnimationFrame ||
window.oCancelRequestAnimationFrame ||
window.msCancelRequestAnimationFrame ||
clearTimeout
} )();
var canvas, context, toggle;
var ctr = 0;
var request;
var x = 10;
var y = 10;
init();
animate();
function init() {
canvas = document.createElement( 'canvas' );
canvas.width = 512;
canvas.height = 512;
context = canvas.getContext( '2d' );
document.body.appendChild( canvas );
}
function animate() {
request = requestAnimFrame( animate );
draw();
}
function draw() {
context.clearRect(0,0,canvas.width,canvas.height);
y+=2;
x+=2;
context.beginPath();
context.arc(x, y, 3, 0, 2 * Math.PI, false);
context.fillStyle = 'green';
context.fill();
context.lineWidth = 5;
context.strokeStyle = '#003300';
context.stroke();
//cancelRequestAnimFrame(request);
}
</script>
</body>
</html>
There are two things in your code which you need to be revised:
First try the new requestAnimationFrame polyfill.
(function() {
var lastTime = 0;
var vendors = ['ms', 'moz', 'webkit', 'o'];
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
window.cancelRequestAnimationFrame = window[vendors[x]+
'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame)
window.requestAnimationFrame = function(callback, element) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function() { callback(currTime + timeToCall); },
timeToCall);
lastTime = currTime + timeToCall;
return id;
};
if (!window.cancelAnimationFrame)
window.cancelAnimationFrame = function(id) {
clearTimeout(id);
};
}())
For an in-depth explanation read this article: http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
The second is that you need to calculate the delta between one time stamp and the next one. You are working with a fixed value which on each rendering iteration got increased by one. Because your browser can not keep up the the pace it might happen to skip one or two frames. This way you get a smooth time.
This is the way you calculate the delta time:
end = Date.now();
delta = ( end - start ) / 1000.0 * 60;
end = start;
http://jsfiddle.net/p5c6c/1/
I implemented a small script to test requestAnimationFrame and it generates
"Uncaught RangeError: Maximum call stack size exceeded" error ..This is the code
<html>
<head>
<meta charset="utf-8">
<script>
window.onload=function(){
if (document.createElement("canvas").getContext){
//alert("browser supports canvas");
//console.log(document.getElementById("canvas").getContext);
canvas = document.getElementById("canvas");
shape = new shapes();
shape.drawball(canvas,5,"red");
}
};
function shapes(){
this.drawtriangle = function(canvas){
triangles = new triangle(0,0,0,200,200,200);
triangles.draw(canvas.getContext('2d'));
}
this.drawball = function(canvas,radius,color) {
ball = new Ball(radius,color);
ball.drawBall(canvas.getContext('2d'),canvas);
}
}
function coordinates(x1,y1){
this.x = x1;
this.y = y1;
}
function angle(angle){
this.angle = angle;
}
function Ball(radius,color){
this.origin = new coordinates(100,100);
this.radius = (radius === "undefined" ) ? 5 : radius;
this.color = (color === "undefined") ? red : color;
this.rotation = 0;
this.index = 0;
this.angles = new angle(0);
this.speed = 10;
}
Ball.prototype.drawBall = function (context,canvas){
context.fillStyle = this.color;
context.strokeStyle = "blue";
context.rotate(this.rotation);
context.beginPath();
context.arc(this.origin.x,this.origin.y,this.radius,0,(Math.PI*2),true);
context.closePath();
context.fill();
context.stroke(); this.animate(context,canvas);
}
Ball.prototype.animate = function (context,canvas){
var that = this;console.log(".......");
var time = new Date().getTime() * 0.002;
this.origin.x = Math.sin( time ) * 96 + 128;
this.origin.y = Math.cos( time * 0.9 ) * 96 + 128;
//context.clearRect(0,0,1000,1000);
console.log("Animating ... ");
this.origin.x = this.origin.x + this.speed;
this.origin.y = this.origin.y + this.speed;
this.angles.angle = this.angles.angle + this.speed;
window.webkitrequestAnimationFrame(that.drawBall(context,canvas));
}
</script>
<style>
body {
background-color: #bbb;
}
#canvas {
background-color: #fff;
}
</style>
</head>
<body>
<canvas id="canvas" width="1000px" height="1000px">
Your browser dows bot suppoet canvas
</canvas>
</body>
</html>
I got another code from the net and this works fine although it has recursion..
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>RequestAnimationFrame.js example</title>
</head>
<body>
<script >/**
* Provides requestAnimationFrame in a cross browser way.
* http://paulirish.com/2011/requestanimationframe-for-smart-animating/
*/
if ( !window.requestAnimationFrame ) {
window.requestAnimationFrame = ( function() {
return window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame || // comment out if FF4 is slow (it caps framerate at ~30fps: https://bugzilla.mozilla.org/show_bug.cgi?id=630127)
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function( /* function FrameRequestCallback */ callback, /* DOMElement Element */ element ) {
window.setTimeout( callback, 1000 / 60 );
};
} )();
}</script>
<script>
var canvas, context;
init();
animate();
function init() {
canvas = document.createElement( 'canvas' );
canvas.width = 256;
canvas.height = 256;
context = canvas.getContext( '2d' );
document.body.appendChild( canvas );
}
function animate() {
requestAnimationFrame( animate );
draw();
}
function draw() {
var time = new Date().getTime() * 0.002;
var x = Math.sin( time ) * 96 + 128;
var y = Math.cos( time * 0.9 ) * 96 + 128;
context.fillStyle = 'rgb(245,245,245)';
context.fillRect( 0, 0, 255, 255 );
context.fillStyle = 'rgb(255,0,0)';
context.beginPath();
context.arc( x, y, 10, 0, Math.PI * 2, true );
context.closePath();
context.fill();
}
</script>
<div style="width:256px">
view source<br /><br/>
requestAnimationFrame() allows modern browsers to stop drawing graphics when a tab or window is not visible. Improving overall performance and batteries on mobile devices.<br /><br />
RequestAnimationFrame.js emulates the basic usage for old browsers.
</div>
</body>
</html>
What may be causing this error and how do I fix it ?
Ball.animate calls Ball.drawBall and vice versa. So, before either finishes executing, they call each other until the "call stack" size exceeds its limit (causing the error).
Instead of
ball.drawBall(canvas.getContext('2d'),canvas);
try
setInterval(function () { ball.animate(canvas.getContext('2d'),canvas); }, 1000/60);
and remove
this.animate(context,canvas);
from Ball.prototype.drawBall
There are many, many problems with your code, but that's the one you asked about.
I've explained the simple errors. My annotations are in /* */ comments. There are also formatting and style errors, which I've omitted.
<html>
<head>
<meta charset="utf-8">
<script>
window.onload=function(){
if (document.createElement("canvas").getContext){
//alert("browser supports canvas");
//console.log(document.getElementById("canvas").getContext);
canvas = document.getElementById("canvas");
shape = new shapes();
/* drawball should be called by a run() function, or similar */
shape.drawball(canvas,5,"red");
}
};
/**
* Is this supposed to be a singleton, or perhaps a module?
* otherwise, you should use prototype to define these methods
*/
function shapes(){
this.drawtriangle = function(canvas){
/* triangles isn't defined in this file? */
triangles = new triangle(0,0,0,200,200,200);
/* I'd store a reference to context as a property of the function (class)
* aka a "static variable" */
triangles.draw(canvas.getContext('2d'));
}
this.drawball = function(canvas,radius,color) {
ball = new Ball(radius,color);
/* same here */
ball.drawBall(canvas.getContext('2d'),canvas);
}
}
/**
* this is reasonable, but don't pluralize a class name unless you mean it
* I'd maybe call it "Point" or "Vec2d"
*/
function coordinates(x1,y1){
this.x = x1;
this.y = y1;
}
/* so you'd use this object as angle.angle?? Just store it as a scalar.*/
function angle(angle){
this.angle = angle;
}
/* This is correct, I'm sure it's also copy/pasted */
function Ball(radius,color){
this.origin = new coordinates(100,100);
this.radius = (radius === "undefined" ) ? 5 : radius;
this.color = (color === "undefined") ? red : color;
this.rotation = 0;
this.index = 0;
this.angles = new angle(0);
this.speed = 10;
}
/**
* Ball.drawBall()? I'd use Ball.draw()
* I'd again store context in the function object, and you don't need to
* pass canvas
*/
Ball.prototype.drawBall = function (context,canvas){
context.fillStyle = this.color;
context.strokeStyle = "blue";
context.rotate(this.rotation);
context.beginPath();
context.arc(this.origin.x,this.origin.y,this.radius,0,(Math.PI*2),true);
context.closePath();
context.fill();
context.stroke();
/* There is no reason to have your whole animation call here,
* there should only be code to _draw_ the _ball_ (like the function says) */
this.animate(context,canvas);
}
/* This makes sense for a singleton Ball, but in this case animate should be
* on a containing object. The Ball doesn't animate anything, the App does */
Ball.prototype.animate = function (context,canvas){
/* I can't explain this. I'm 99.999% sure it's not what you want. */
var that = this;console.log(".......");
var time = new Date().getTime() * 0.002;
this.origin.x = Math.sin( time ) * 96 + 128;
this.origin.y = Math.cos( time * 0.9 ) * 96 + 128;
//context.clearRect(0,0,1000,1000);
console.log("Animating ... ");
this.origin.x = this.origin.x + this.speed;
this.origin.y = this.origin.y + this.speed;
this.angles.angle = this.angles.angle + this.speed;
/* you complete your cycle here (animate calls drawBall and vice versa) */
window.webkitrequestAnimationFrame(that.drawBall(context,canvas));
}
</script>
<style>
body {
background-color: #bbb;
}
#canvas {
background-color: #fff;
}
</style>
</head>
<body>
<canvas id="canvas" width="1000px" height="1000px">
Your browser dows bot suppoet canvas
</canvas>
</body>
</html>
I got familiarize with canvas with the help of lot of resources available online, and trying to compare the same with svg. My application needs to draw limited number of shapes, but need to be interactive. I think svg would be more suitable being the shapes are dom elements. it would be great help if someone can translate the canvas example (see demo) to svg with only dependency on jQuery and html5 (don't worry about IE)
In the example, I need to draw a rectangle using mouse (left click and drag). you may add each element to the dom (in canvas I may have to keep an array for the rect object, as the screen clears on each event).
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="draw.js"></script>
</head>
<body>
<canvas id="cvs" height="600" width="800"></canvas>
</body>
< /html>
$(document).ready(function() {
var cvs = $("#cvs"),
ctx = cvs.get(0).getContext("2d");
var v_bufX, v_bufY, v_bufW, v_bufH;
var box = function ( ctx, style, x, y, w, h ) {
ctx.beginPath();
ctx.rect( x, y, w, h );
ctx.closePath();
if ( style.fill ) {
ctx.fillStyle = style.fill;
ctx.fill();
}
if ( style.stroke ) {
ctx.strokeStyle = style.stroke;
ctx.lineWidth = style.width || 1;
ctx.stroke();
}
},
draw = function (res) {
var style = {fill:'rgba(96,185,206, 0.3)',stroke:'rgb(96,185,206)',width:.5};
ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);
box(ctx, style, res.x, res.y, res.w, res.h);
};
var rect = {
reset : function () {
this.x0 = this.y0 = this.x = this.y = this.w = this.h = -1;
this.started = this.dragging = false;
},
mousedown : function (e) {
this.reset();
this.started = true;
this.x0 = e._x;
this.y0 = e._y;
},
mousemove : function (e) {
if (!this.started) {
return;
}
var x = Math.min(e._x, this.x0),
y = Math.min(e._y, this.y0),
w = Math.abs(e._x - this.x0),
h = Math.abs(e._y - this.y0);
console.log(x, y, w, h);
if (!w || !h) {
return;
};
this.x = x;
this.y = y;
this.w = w;
this.h = h;
draw(this);
},
mouseup : function (ev) {
if (this.started) {
this.mousemove(ev);
this.started = false;
draw(this);
}
}
};
$(window).mousedown(function(e) {
var canvasOffset = cvs.offset();
e._x = Math.floor(e.pageX-canvasOffset.left);
e._y = Math.floor(e.pageY-canvasOffset.top);
rect.mousedown(e);
});
$(window).mousemove(function(e) {
var canvasOffset = cvs.offset();
e._x = Math.floor(e.pageX-canvasOffset.left);
e._y = Math.floor(e.pageY-canvasOffset.top);
rect.mousemove(e);
});
$(window).mouseup(function(e) {
var canvasOffset = cvs.offset();
e._x = Math.floor(e.pageX-canvasOffset.left);
e._y = Math.floor(e.pageY-canvasOffset.top);
rect.mouseup(e);
});
});
I'm not willing to rewrite an entire example, but here are some resources that might help:
Embedding SVG in XHTML5 - includes a simple JavaScript that creates some of the elements programmtically.
Dragging Transformed Elements - uses my own dragging code and accounts for translations in transformed hierarchies.
SVGPan - a nice library for panning and zooming
Raphael - a library designed to create SVG/VML (for old IE) from JavaScript, including its own draggable implementation.
KevLinDev - a venerable but incredibly-rich source of tutorials and code related to SVG.