CODEWITHSUNDEEP
javascripthtmlcanvashtml5-canvas
aaaavvvv
aaaavvvv

Reputation: 3

Issues with drawing reading values in javascript array - drawing in HTML5 canvas

I'm relatively new to all this and am trying to draw a basic shape on the html5-canvas. I think an option is to use 3.js for this but I was wondering if it's possible to do it without? The x,y values for each point are in arrays... Please help! Code and fiddle link below:

http://jsfiddle.net/mewchew/wJwL8/8/

var canvas = document.getElementById("myCanvas");

if (canvas.getContext) {
    var ctx = canvas.getContext('2d');
    var width = canvas.width
    var height = canvas.height
    var xProp = 0.28
    var yProp = 0.43

    //Find canvas centerpoint - may need to change to global variable?
        function centerPoint(width, height) {
            x = Number(width) / 2;
            y = Number(height) / 2;
            return [x, y];
        }


    //Define diamond points
    xy = centerPoint(width,height);

    var pTx = newArray();
    pTx[0] = x;
    pTy[1] = x + xProp*x;
    pTy[2] = x;
    pTy[3] = x - xProp*x;
    pTy[4] = x;

    var pTy = newArray();
    pTy[0] = y;
    pTy[1] = y;
    pTy[2] = y - yProp*y;
    pTy[3] = y;
    pTy[4] = y + yProp*y;

    alert(String(pTx[1])+String(pTy[1]));  

    //Draw diamond
    ctx.beginPath();
    ctx.moveTo(pTx[0], pTy[0]);
    ctx.lineTo(pTx[1],pTy[1]);
    ctx.lineTo(pTx[2],pTy[2]);
    ctx.lineTo(pTx[3],pTy[3]);
    ctx.lineTo(pTx[4],pTy[4]);
    ctx.closePath();
    ctx.fillstyle() = "#FFFFFF"
    ctx.fill();


} else {
    // canvas-unsupported code here
    log('Fail');
}

Upvotes: 0

Views: 217

Answers (1)

Rahil Wazir
Rahil Wazir

Reputation: 10132

You had couple of errors in your script

First:

newArray() should be new Array()

new Array()
   ^-------- see space

Second:

var pTx = newArray();
pTx[0] = x;                    // ---> ptx ok
pTy[1] = x + xProp*x;          // ---> its pty? why? change all to ptx
pTy[2] = x;                    // ---> change to ptx
pTy[3] = x - xProp*x;          // ---> change to ptx
pTy[4] = x;                    // ---> change to ptx

It should be

var pTx = new Array();
pTx[0] = x;
pTx[1] = x + xProp*x;
pTx[2] = x;
pTx[3] = x - xProp*x;
pTx[4] = x;

Third

fillStyle is not a method its a property

ctx.fillstyle() = "#FFFFFF"

It should be

ctx.fillstyle = "#FFFFFF"

Demo

Upvotes: 2

Related Questions