Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Lijie Zhou
Lijie Zhou
4,498 Points

The canvas project improvement

After I finished the JQuery canvas project, I tried to improve it by adding one extra canvas which has independent function, but It didn't work out.

Here's what I did: 

 //create two variables for two different canvases
var $canvas1 = $("canvas[0]");
var $canvas2 = $("canvas[1]");

//Then, use getContext method on each separate canvas
var context1 = $canvas1.getContext("2d");
var context2 = $canvas2.getContext("2d");

//I tried to trigger the mouse events on canvas1 first
$canvas1.mousedown(function(e){
    var  lastEvent = e; 
}).mousemove(function(e){
    context1.beginPath();
    context1.moveTo(lastEvent.offsetX, lastEvent.offsetY);
    context1.lineTo(e.offsetX,e.offsetY);
    context1.stroke(); 
});

The problem is nothing happens. I'm really confused.

3 Answers

Iain Simmons
MOD
Iain Simmons
Treehouse Moderator 32,305 Points
Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

You should use jQuery's eq() method to get the first and second canvas elements:

var $canvas1 = $("canvas").eq(0);
var $canvas2 = $("canvas").eq(1);

And the getContext function can only be run on the actual HTML canvas element, which you can access by getting the first item of the selected jQuery array/object:

var context1 = $canvas1[0].getContext("2d");
var context2 = $canvas2[0].getContext("2d");

Try it with those changes...

Lijie Zhou
Lijie Zhou
4,498 Points
Lijie Zhou
Lijie Zhou
4,498 Points

Thanks, I figured it out. https://www.youtube.com/watch?v=3wX6Y5wrJjs&feature=youtu.be

Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

You should include in here what you needed to fix in case anyone else has the same problem, or if my previous response/comment was correct, then accept it as the answer.

I'd also suggest that if you're going to post a YouTube video of the work that you've done, that you add a link to Treehouse. Even better, add a referral link so if someone likes your work and wants to join, you'll get a discount on your subscription!

Lijie Zhou
Lijie Zhou
4,498 Points
Lijie Zhou
Lijie Zhou
4,498 Points

Sounds good. Thanks for reminding.

First, I created two canvas and their contexts

var $canvasOne = $("canvas.one");
var $canvasTwo = $("canvas.two"); 


var contextOne = $canvasOne[0].getContext("2d"); 
var contextTwo = $canvasTwo[0].getContext("2d");

I then defined a global valuable lineWidth

var lineWidth = $('#lineWidth').val();

In HTML, create the lineWidth button and slider

<div class = "LineControl">
<button id="revealLineSelect">Line Width</button>
       <div id="lineSelect">

        <div class="sliders">
            <p>
                <label for="lineWidth">lineWidth</label>
                <input id="lineWidth" name="lineWidth" type="range" min=0 max=20 value=0>
            </p>
         </div>

    </div> 
</div>

You also need to style the button and slider in CSS

Finally in Javascript

$("#revealLineSelect").click(function( ){
           changeLineWidth();
           $("#lineSelect").toggle();
});

function changeLineWidth(){
          lineWidth = $('#lineWidth').val(); 
}

On the mouse event, add this line: 

contextOne.lineWidth = lineWidth;