Canvas drawing using javascript functions and global variables

Question

4.00/5 (1 vote)

See more:

Hi,
May I get help! 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 in C#?

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();

XML

<canvas id="canvas_circle" width="800" height="600"></canvas>

Posted 15-Apr-11 6:41am

Le_Bedel

Updated 15-Apr-11 7:20am

Sandeep Mewara

v2

Add a Solution

2 solutions

Solution 1

You need double quotes in your call to getContext:

contextCircle = canvasCircle.getContext("2d");

Canvas are client side elements and C# will not work for them. You could try silverlight I suppose.

Posted 15-Apr-11 8:48am

Stryder_1

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Graham Breach · Accepted Answer · 2011-04-15T21:49:00

Solution 2

You should check if things work in the browser:

JavaScript

function init() {
    canvasCircle = document.getElementById("canvas_circle");
    if(canvasCircle && canvasCircle.getContext) {
        contextCircle = canvasCircle.getContext('2d');
        return setInterval(draw, 10);
    } else {
        alert('No canvas!');
    }
}

The if statement here checks if canvasCircle has been found, and if the getContext function is available.

init should only be called when the page has loaded or it may not be able to find the canvas element - replace

JavaScript

init();

with

JavaScript

window.onload=init;

Posted 15-Apr-11 21:49pm

Graham Breach

Comments

Le_Bedel 16-Apr-11 12:38pm

The following does not work. I don't know why. I tried all the possibilities as you where I comment out. Either the same problem on clear_circle() either nothing is drawn on the canvas.

var canvasCircle = document.getElementById("canvas_circle");
//var canvasCircle;
var contextCircle;

var theContext = function () {
if (canvasCircle && canvasCircle.getContext) {
//contextCircle = canvasCircle.getContext('2');
return canvasCircle.getContext('2');
};

var x = 400;
var y = 300;
var dx = 2;
var WIDTH = 800;
var HEIGHT = 600;

// Check for canvas support
//function supports_canvas() {
// return !!document.createElement("canvas").getContext('2');
}

// 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.fill();
}

function clear_canvas() {
contextCircle = theContext();
contextCircle.clearRect(0, 0, WIDTH, HEIGHT);
}

function init() {
// canvasCircle = document.getElementById("canvas_circle");
// canvasCircle = documsent.getElementById("canvas_circle");
// if (canvasCircle && canvasCircle.getContext) {
// contextCircle = canvasCircle.getContext('2');
// return setInterval(draw, 10);
// } else {
// alert('No canvas!');
// }

contextCircle=theContext();
return setInterval(draw,10);
}

function draw() {
clear_canvas();
draw_circle(x, y, 50);

if (x + dx > WIDTH || x + dx < 0)
dx = -dx;
x += dx;

}
window. önload = init;

Graham Breach 16-Apr-11 13:10pm

It was better the way you had it originally. Now your global variables for width, height, etc. are not global anymore and are therefore not accessible by the draw functions, and you moved the getElementById out of the init function where it should be.

I just tried your original code in Chrome, replacing init() with window.onload = init, and it works. Are you sure that the Blackberry browser supports drawing on a canvas?

Le_Bedel 17-Apr-11 13:35pm

Thanks. it works. But I don't understand why the following animation looks like static.

// JScript source code

var s_canvas;
var s_context;
var R = 70;
var beta = 0;
var Xs = R * Math.cos(beta);
var Ys = R*Math.sin(beta);
var WIDTH = 400;
var HEIGHT = 300;
var angle = 0;
var tetha = 1.8 * Math.PI / 180;
var counterclockwise=true;
var n = 4;

function draw_square(c,n, x, y, r, angle, counterclockwise) {

c.fillStyle = "00ff00";
c.beginPath();
c.moveTo(x + r * Math.cos(angle), y - r * Math.sin(angle));

var alpha=2*Math.PI/n;

for(var i=1;i