Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

Sketch Meh! Paint App! Halp!

So, I've been writing this painting application found in this link that I've dubbed "Sketch Meh" based off of Andrew Chalkley's wonderful jQuery simple drawing app course. I had NO idea about how to use canvas when I first started, and now, I've got something that I can be proud to show off, even at its current stage. There are quite a few things that are different from the base of this program which you can see if you take a peek at the source of the app which includes a dynamic canvas based on screen resolution, many different tools (Spray Paint, Rectangles, Circles, etc), undo (Ctrl + Z) and redo (Ctrl + Y) actions for canvas, slider controls that show you the number you're on right now, etc.

I am having an issue, however, with a tool I've created that creates a star. My goal with this tool is to have it operate the same as the rectangle and circle tools such that when the user clicks on the canvas, they can resize the star to their hearts content. Right now, it's just placing a fixed size star on the page (stroked or filled).

If you just want to take a look at the app and let me know what you think, I'm cool with that, and if you can help with the star issue, too, I'll find you and plant a wet kiss right on your lovely face. Thanks! :)

P.S.

Hey John Weland, check this out man! Let me know what you think!

Dude,

This is awesome work! I'll jump in and check out the star resize thing here in a bit to see if I can see anything. But seriously, great work.

I appreciate that a ton! Btw, I'm going to hit you up on Hangouts about something!

Michael Paccione
Michael Paccione
9,017 Points

Hey Marcus, I took a look at this app you've made and it's screaming Pictionary!

Seriously some node.js - some multiplayer - some video - and you'll have the best pictionary game on the web. One that I will actually play.

I've never played Pictionary before, but that is definitely an interesting idea, Michael. Thanks!

2 Answers

Damien Watson
Damien Watson
27,419 Points

Hi Marcus, Nice work, I haven't played with the canvas for years, but this sounded like fun.

The first thing I did was create the star using points stored in an array, this way you could multiply by the distance moved and get something relative.

var starPoints = [
    new point(0,-0.9),
    new point(-0.3,-0.25),
    new point(-1,-0.25),
    new point(-0.4,0.1),
    new point(-0.8,0.9),
    new point(0,0.35),
    new point(0.8,0.9),
    new point(0.4,0.1),
    new point(1,-0.25),
    new point(0.3,-0.25),
]
function point(x,y) {
    this.x = x;
    this.y = y;
}

I then created a star function so I could reuse the code and pass in a multiplier:

function plotStarWithSize(multi) {
    tmpContext.moveTo(tool.startx + starPoints[0].x * multi, tool.starty + starPoints[0].y * multi);
    for (var i=1; i<starPoints.length; i++) {
        tmpContext.lineTo(tool.startx + starPoints[i].x * multi, tool.starty + starPoints[i].y * multi);
    }
    tmpContext.closePath();
}

In the mousedown, I changed the check to be like :

   if (tool.mode === "starfill") {
        plotStarWithSize(1);
        tmpContext.fill();  
        drawn = true;    
    }
    else if (tool.mode === "staroutline") {
        plotStarWithSize(1);
        tmpContext.stroke(); 
        drawn = true;    
    }

And the mousemove pretty much the same but I calculated the multiplier :

  case "starfill":
    tmpContext.clearRect(0, 0, tmpCanvas[0].width, tmpCanvas[0].height); 
    plotStarWithSize(xpos-tool.startx);
    tmpContext.fill();
    drawn = true;
    break;            
  case "staroutline":
    tmpContext.clearRect(0, 0, tmpCanvas[0].width, tmpCanvas[0].height); 
    plotStarWithSize(xpos-tool.startx);
    tmpContext.stroke();
    drawn = true;
    break;      

Again, thanks for posting this challenge, made my morning. :)

Damien Watson
Damien Watson
27,419 Points

I made the star shape on a grid of -1,-1 to 1,1. If you use 1mm grid paper you can probably get a more accurate star, but this is just one I whipped up on plain paper.

Oh, also you could set the canvas size to the window size, not the screen size as the user may not be using a full width window.

var canvasMargin = 8;
var canvasWidth = $(window).width() - canvasMargin * 2;
var canvasHeight = $(window).height() * 0.6;

and maybe also detect if scroll bar is visible and reduce width another ~15px.

Damien, you definitely deserve that! Thank you a ton! I was pulling out my hair over this problem! lol I owe you a big wet kiss on the face! hahaha

I will definitely look into playing with the screen size a little more so that I can get the best user experience possible. Thanks for all of the tips and the help!

By the way, if you have a website, I will link to it within the source of the program. I put your name inside app.js for helping!

Kyle Meyer
Kyle Meyer
5,447 Points

This is super great!

I'm going to offer up a free month of treehouse to the student that helps you fix the star brush!

Get cracking! :zap:

Awesome!!! :) Thank you!