CODEWITHSUNDEEP
javascript
Engine
Engine

Reputation: 5420

Getting started with JS and HTML5

I'm try to draw objects using canvas and JS on HTML5. for that I've 2 file index.html with the follwing :

    <html>
<body>
    <canvas id="myCanvas"></canvas>
    <script type="text/javascript" src="script.js">
     </script>  
</body>
</html>

As far as I understood I'm callign here the script.js with the following :

var myCanvas = document.getElementById("myCanvas");
myCanvas.width = 500;
myCanvas.height = 500;

var ctx = myCanvas.getContext("2d");


function drawLine(ctx, startX, startY, endX, endY){
    ctx.beginPath();
    ctx.moveTo(startX,startY);
    ctx.lineTo(endX,endY);
    ctx.stroke();
}

function drawArc(ctx, centerX, centerY, radius, startAngle, endAngle){
    ctx.beginPath();
    ctx.arc(centerX, centerY, radius, startAngle, endAngle);
    ctx.stroke();
}
function drawPieSlice(ctx,centerX, centerY, radius, startAngle, endAngle, color ){
    ctx.fillStyle = color;
    ctx.beginPath();
    ctx.moveTo(centerX,centerY);
    ctx.arc(centerX, centerY, radius, startAngle, endAngle);
    ctx.closePath();
    ctx.fill();
}

this.drawLine(_ctx,100,100,200,200);
this.drawArc(_ctx, 150,150,150, 0, Math.PI/3);
this.drawPieSlice(_ctx, 150,150,150, Math.PI/2, Math.PI/2 + Math.PI/4, '#ff0000');

Opening the index.html I can't see a line or an arc, so my question is what I'm missing here ?

thanks in advance !

Upvotes: 0

Views: 74

Answers (3)

user5734311
user5734311

Reputation:

Just for the sake of completeness, you have three options here (listed from what is best to worst imo):

  1. use var _ctx = myCanvas.getContext("2d");
    This will fix the code you have, and your functions are reusable for other contexts

  2. remove the ctx / _ctx parameter from your declaration lines and calls
    That way the functions use the existing global variable

  3. The suggested solution of changing _ctx to ctx
    This fixes the code but glosses over the fact that your local ctx is shadowing the global one, and that passing the context into the function is unnecessary here; it's the least readable option and bad practice in my personal opinion

There's also a fourth option, one I prefer, but it touches on JavaScript's prototype. Declare the function like this:

CanvasRenderingContext2D.prototype.drawLine = function (startX, startY, endX, endY) {
  this.beginPath();
  this.moveTo(startX, startY);
  this.lineTo(endX, endY);
  this.stroke();
}

You have now added your own custom function to the browser's API, making it available for all CanvasRenderingContext2D objects. You can call it like this:

ctx.drawLine(100, 100, 200, 200);

Upvotes: 1

jmargolisvt
jmargolisvt

Reputation: 6088

You have _ctx in your function calls but you defined it as ctx.

Upvotes: 1

Mina Ragaie
Mina Ragaie

Reputation: 477

just change _ctx to be ctx

this.drawLine(ctx,100,100,200,200);
this.drawArc(ctx, 150,150,150, 0, Math.PI/3);
this.drawPieSlice(ctx, 150,150,150, Math.PI/2, Math.PI/2 + Math.PI/4, '#ff0000');

and always check the console tab, because when i tried ur code in the browser got this error Uncaught ReferenceError: _ctx is not defined so i changed _ctx to ctx

Upvotes: 0

Related Questions