I am asked to develop an application that will run on Blackberry. But I don't knowledge in java. Since the application needs drawing, I opt for html5 and javascript. Then I read some javascript tutorials. But when I try to put it into practice it, I get error saying that the "getContext" attribut is undefined.
Is it possible to write it in c#?
var canvasCircle;
var contextCircle;
var x = 400;
var y = 300;
var dx = 2;
var WIDTH = 800;
var HEIGHT = 600;
// the circle wont make any transsformation.
function draw_circle(x, y, r) {
contextCircle.beginPath();
contextCircle.arc(x, y, r, 0, 2 * Math.PI, true);
contextCircle.closePath();
contextCircle.stroke();
}
function clear_canvas() {
contextCircle.clearRect(0, 0, WIDTH, HEIGHT);
}
function init() {
canvasCircle = document.getElementById("canvas_circle");
contextCircle = canvasCircle.getContext('2d');
return setInterval(draw, 10);
}
function draw() {
clear_canvas();
draw_circle(x, y, 50);
if (x + dx > WIDTH || x + dx < 0)
dx = -dx;
x += dx;
}
init();
<canvas id="canvas_circle" width="800" height="600"></canvas>
I'm not familiar with the Blackberry browser you are using, but it looks like it doesn't support Canvas. Dive Into HTML5 has a great chapter on feature detection: http://diveintohtml5.ep.io/detect.html
It also has a nice library called Modernizr you can use to detect HTML5 features. But to check for canvas support is pretty simple (as the chapter shows):
function supports_canvas() {
return !!document.createElement('canvas').getContext;
}
Related
I don't understand why the infinite loop does not work but uncommenting the function call works.
<body>
<canvas id="myCanvas"style="border:2px solid black;" width="1600" height="900">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var c = document.getElementById ("myCanvas").getContext ("2d");
var boxSize = 25;
var numBoxes = 1;
var x = 1000;
var dx = 1;
var y = 100;
var dy = 1;
var a = 0.01;
var da = 0.1;
var size = 20;
var w = c.canvas.width;
var h = c.canvas.height;
//function testing () {
while (true) {
c.clearRect (0, 0, w, h);
x = x + 1;
y = y + 1;
a = a + 0.1;
x = x + dx;
y = y + dy;
if (x < size / 2 || x + (size / 2) > w) {
dx = -dx;
da = -da;
}
if (y < size / 2 || y + (size / 2) > h) {
dy = -dy;
da = -da;
}
c.save ();
c.translate (x, y);
c.rotate (a);
c.strokeRect (-size / 2, -size / 2, size, size);
c.restore ();
}
// testing ();
// setInterval (testing, 10);
</script>
</body>
When you use setInterval you keep adding the function you are calling to the queue of things for the browser to do. Repaint events are also added to this queue.
When you use an infinite loop, the browser never gets to the end of the function, so it never gets around to running a repaint and the image in the document never updates.
JavaScript-in-a-browser is a part of a larger construction. You need to align to the rules of this construction and don't hurt it. One of the rule is that your JavaScript must run quick and exit then. Exit means that control gets back to the framework, which does all the job, repaint the screen etc.
Try to hide and show something many times:
for (n = 0; n < 200; n++) {
$("#test").hide();
$("#test").show();
}
When this code runs, you won't see any flickering, you will see that the last command will have effect.
Have to say, it's not easy to organize code that way, if you want to make a cycle which paints nice anims on a canvas, you have to do it without while.
This is my Javascript
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
canvas.addEventListener('click', drawLine, false);
var clicks = 0;
var lastClick = [0, 0];
$(function() {
$.each(['#f00', '#ff0', '#0f0', '#0ff', '#00f', '#f0f', '#000', '#fff'], function() {
$('#tools').append("<a href='#' onclick=\"context.strokeStyle = '" + this + "';return false;\" style='width: 10px; background: " + this + ";'></a> ");
});
});
function getCursorPosition(e) {
var x;
var y;
if (e.pageX != undefined && e.pageY != undefined) {
x = e.pageX;
y = e.pageY;
} else {
x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
}
return [x, y];
}
function drawLine(e) {
//context = this.getContext('2d');
x = getCursorPosition(e)[0] - this.offsetLeft;
y = getCursorPosition(e)[1] - this.offsetTop;
if (clicks != 1) {
clicks++;
} else {
context.beginPath();
context.moveTo(lastClick[0], lastClick[1]);
context.lineTo(x, y, 6);
// context.strokeStyle = '#000000';
context.stroke();
clicks = 0;
}
lastClick = [x, y];
};
This HTML
<div id='tools'>
</div>
<canvas id="canvas" width="500" height="500"></canvas>
I want to generate a new DIV when I finish drawing the line, and make it draggable, how can I do it? I not sure how can contain the line inside the DIV.
The Div should be create when I stop drawing one line.
This is the Jfiddle for a clearer picture
http://jsfiddle.net/pVZzY/1/
I suggest kinetic.js for this task.
Take a look at it http://kineticjs.com/
This will surely make your intended job much easier
Canvas doesn't allow you to alter/move/scale the objects that you've just draw.
Think of it as paper sheet that you color up with pencils, you can't move the pencil line around the only way is to erase the old line and draw a new one - same goes for canvas.
But! There are a bunch of libraries that make working with canvas easier, one of which is http://kineticjs.com/, another one is http://paperjs.org/. I can't claim for kineticjs, but seems it's similar to paper.js in the way that they both create an Object layer.
Briefly speaking - they provide you with API to create and change scene objects (images, lines, shapes) and deal with draw-clear-redraw Canvas concept at the backstage.
fyi, regarding js libs mentioned in other posts, i just checked and:
kineticjs is no longer maintained (3-5 years) but last version is apparently very stable. 3775 stars on github.
paper is still going. > 10,000 stars on github.
I have a huge performance issue on iOS html5 webapp when I modify the position of multiple html elements in CSS. I would like also to move manually my elements. I do not want to use CSS transformation because it is not possible to stop the animation (we are making a highly responsive game).
My example works fine on a desktop browser (chrome, firefox, etc.), on Android. But it is very slow on an iPad 2 and an iPhone 4S (both running iOS 5.1).
Running the html5 code in a Phonegap app is better than directly in the browser but is still slow.
What do you suggest to improve things?
editable example
full screen example
First of all, if you want something that is not slow, avoid all jQuery call you can.
Here is how I would rewrite (really quickly) your code :
// shim layer with setTimeout fallback
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function( callback ){
window.setTimeout(callback, 1000 / 60);
};
})();
var canvas = document.getElementById('canvas-test');
canvas.height = 500;
canvas.width = 500;
var context = canvas.getContext('2d');
// in this example, the fillstyle is always the same. no need to change it at every loop
context.fillStyle = "#FF0000";
var balls = [];
var ballcanvas = [];
var ballctx = [];
// create 30 balls in canvases
var eDivBody = document.getElementById('divbody');
for (var i = 0; i < 30; i++){
balls[i] = {
x : 250,
y : 100 + i * 2,
dx : 3, // direction
};
// create the canvas
var eBall = document.createElement('canvas');
eBall.id = 'ballcanvas' + i;
eBall.width = 75;
eBall.height = 75;
eDivBody.appendChild(eBall);
// some css
// no need for jQuery
eBall.style.position = "absolute";
eBall.style.left = balls[i].x + "px";
eBall.style.top = balls[i].y + "px";
eBall.style.backgroundColor = "#000000";
// associate the element to the ball, no need to go threw the DOM after
balls[i].element = eBall;
}
var ball_test = {
x : 250,
y : 300,
dx : 3 // direction
};
function loop(ball_test, balls, canvas, context, ballcanvas, ballctx){
//change of direction on the sides
if (ball_test.x > 400 || ball_test.x < 100)
ball_test.dx *= -1;
// movement
ball_test.x += ball_test.dx;
// the same for balls in canvases
// never use array.legth in a loop condition. put it in a variable then compare.
for (var i = 0, j = balls.length; i < j; i++){
// balls are following the test ball, no need to re-check the bounds
// we take the test ball direction
balls[i].dx = ball_test.dx;
//movement
balls[i].x += balls[i].dx;
// change left style - No need for jQuery
balls[i].element.style.left = balls[i].x + "px";
}
// display ball_test
displayBallTest(ball_test, canvas, context);
// Prefer the use of requestAnimationFrame
requestAnimFrame(function(){
loop(ball_test, balls, canvas, context, ballcanvas, ballctx);
});
};
// no need to recalculate Math.PI * 2 for every loop.
// do it just the first time then use the value
var pi2 = Math.PI * 2;
function displayBallTest(ball, canvas, context){
// clear canvas
// you don't need to clear all the canvas, just the zone where you now the ball is.
// must need some calculation to be the most efficient possible
context.clearRect(ball.x - 50 , ball.y - 50, 100, 100);
context.beginPath();
context.arc(ball.x, ball.y, 40, 0, pi2 );
context.fill();
};
// start main loop
loop(ball_test, balls, canvas, context, ballcanvas, ballctx);
I commented the code but here are what I did :
totally avoiding jQuery. No need, except maybe for the ready if you choose to not put your script at the end of the content
using requestAnimationFrame when possible
avoiding recalculation or reset of values when they are global
(Math.PI*2 , context.fillStyle ... )
avoiding the use of .length if for loop condition
But I think your problem come from the fact that you want to move 30 canvas elements instead of drawing theyre content into the main canvas.
iOS is known to be fast when you use Canvas Drawing.
For me, your performance problems will be resolved if you choose to draw on the main canvas instead of moving DOM elements.
One obvious thing you can do is cache your selector instead of executing it every time:
// some css
$('#ballcanvas' + i).css("position", "absolute");
$('#ballcanvas' + i).css("left", balls[i].x + "px");
$('#ballcanvas' + i).css("top", balls[i].y + "px");
$('#ballcanvas' + i).css("background-color", "#000000");
Should be something like:
var thisBall = $('#ballcanvas' + i)
thisBall.css("position", "absolute");
... rest of your code ....
Aside: Why bother using document.getElementById, when you already have Jquery $.
Please, may someone help me! I am new in javascript.
I want to make canvas animation using javascript. But I have the following error
SCRIPT5007: Unable to get value of the property 'getContext': object
is null or undefined drawing_script.js, line 31 character 5
Here is the code.
Javascript:
// JScript source code
/*
Because the canvas can hold only one context at time, we'll create two canvas. Each one with its context.
One canvas for the circle, and another one for the square.
*/
var canvasCircle;
var contextCircle;
var x = 400;
var y = 300;
var dx = 2;
var WIDTH = 800;
var HEIGHT = 600;
// the circle wont make any transsformation.
function draw_circle(x, y, r) {
contextCircle.beginPath();
contextCircle.arc(x, y, r, 0, 2 * Math.PI, true);
contextCircle.closePath();
contextCircle.stroke();
}
function clear_canvas() {
contextCircle.clearRect(0, 0, WIDTH, HEIGHT);
}
function init() {
//canvasCircle = document.getElementById("canvas_circle");
canvasCircle = document.getElementById("canvas_circle");
contextCircle = canvasCircle.getContext('2d');
return setInterval(draw, 10);
}
function draw() {
// clear_canvas();
draw_circle(x, y, 50);
// if (x + dx > WIDTH || x + dx < 0)
// dx = -dx;
// x += dx;
}
init();
HTML5:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<script type="text/javascript" src="Scripts/drawing_script.js" language="javascript"></script>
<title>Blackberry</title>
</head>
<body>
<div class="drawing" style="background:Green">
<canvas id="canvas_circle" width="800" height="600"></canvas>
This is happening because your executing the script before you create the canvas.
Create the canvas element FIRST then embed the javascript.
IE: canvasCircle is undefined because you can't get an element by ID that does not exist yet!
I found the answer: the init() should be
function init() {
s_canvas = document.getElementById("canvas_square");
// Check if the canvas is supported and if the getContext is available
if (s_canvas && s_canvas.getContext) {
s_context = s_canvas.getContext("2d");
return setInterval(draw, 10);
}
else {
alert("Canvas is not supported!");
}
}
And the called of init() is replace with window.onload=init.
Since you said that you are new to javascript, I believe that the problem could be that the browser on which you are running the code may not be supporting canvas.
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.canvas.width = window.innerWidth;
context.canvas.height = window.innerHeight;
var x1 = Math.random()*context.canvas.width;
var y1 = Math.random()*context.canvas.height;
var xdir = 0; var ydir = 0;
context.beginPath();
setInterval(function(){
for (var i = 0; i < 10; i++) {
randx = Math.random(); randy = Math.random();
if (randx > 0.95) {
if (xdir < 0) xdir = (xdir+((Math.random()*1.5) - 1))/2;
else if (xdir > 0) xdir = (xdir+((Math.random()*1.5) - 0.5))/2;
else xdir = (Math.random()*1.5) - 0.75;
}
if (randy > 0.95) {
if (ydir < 0) ydir = (ydir+((Math.random()*1.5) - 1))/2;
else if (ydir > 0) ydir = (ydir+((Math.random()*1.5) - 0.5))/2;
else ydir = (Math.random()*1.5) - 0.75;
}
context.lineTo(x1+xdir, y1+ydir);
context.stroke();
x1 = x1+xdir;
y1 = y1+ydir;
}
},50);
This is my random line script, but my lines are really ugly: http://i.stack.imgur.com/YZT2o.png
Is there any better way for achieving a smooth line using canvas?
take a look at this question:
Drawing GOOD LOOKING (like in Flash) lines on canvas (HTML5) - possible?
Lines on HTML5 Canvas are nicely antialiased on all browsers/OS (AFAIK). However, in your update callback with its 10-strokes-per-loop you are neither clearing your canvas nor clearing your path and so you are drawing the same path on top of itself 200 times per second. This is causing all the anti-aliasing to be destroyed as even the faintest opacity pixels build up until they are solid lines.
The simplest fix to make your code look pretty is to add this line:
context.clearRect(0,0,context.canvas.width,context.canvas.height);
inside your for loop, for example right before context.stroke();.
This one-line change makes it look good, but is bad for performance, clearing and redrawing the canvas 10 times for each visual update.
Here's a better alternative:
context.beginPath();
context.moveTo(x1,y1);
context.lineTo(x1+xdir, y1+ydir);
context.stroke();
x1 += xdir; y1 += ydir;
This way you never clear the canvas, and instead draw only the changed line each frame.
One other alternative (if you need the full path always available) is to accumulate your changes to the context path in one high-speed setInterval loop, and in another, slower loop occasionally clear the canvas and re-stroke the entire path. This is similar to what I've done for my Langton's (Very Fast) Ant simulation.