Getting started with JS and HTML5

Question

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 !

You got _ctx in your function calls but you defined it as ctx. Could that be it? — jmargolisvt
– jmargolisvt, Commented Oct 9, 2018 at 17:20
@jmargolisvt thanks for your comment, I thought I was misunderstanding the call of functions in js ! thank u ! — Engine
– Engine, Commented Oct 9, 2018 at 17:23
@jmargolisvt you can put is as an answer I'll accepted. And to down voter, you're just great — Engine
– Engine, Commented Oct 9, 2018 at 17:24
@Engine Calling the functions with this. at the start isn't necessary here; in your code, this refers to the window object, which is the default context anyway. — user5734311
– user5734311, Commented Oct 9, 2018 at 17:50

jmargolisvt · Accepted Answer · 2018-10-09 17:28:45Z

1

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

answered Oct 9, 2018 at 17:28

jmargolisvt

6,1165 gold badges32 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user5734311 · Accepted Answer · 2018-10-09 17:49:21Z

1

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

use var _ctx = myCanvas.getContext("2d");
This will fix the code you have, and your functions are reusable for other contexts
remove the ctx / _ctx parameter from your declaration lines and calls
That way the functions use the existing global variable
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);

answered Oct 9, 2018 at 17:49

user5734311

1 Comment

user5734311 Over a year ago

Here's your code, using option #4: jsfiddle.net/khrismuc/g9jdrunw

Mina Ragaie · Accepted Answer · 2018-10-09 17:25:31Z

0

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

answered Oct 9, 2018 at 17:25

Mina Ragaie

4656 silver badges17 bronze badges

Collectives™ on Stack Overflow

Getting started with JS and HTML5

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related