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
Marcus Parsons
15,719 PointsSketch 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!
Marcus Parsons
15,719 PointsI appreciate that a ton! Btw, I'm going to hit you up on Hangouts about something!
Michael Paccione
9,017 PointsHey 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.
Marcus Parsons
15,719 PointsI've never played Pictionary before, but that is definitely an interesting idea, Michael. Thanks!
2 Answers
Damien Watson
27,419 PointsHi 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
27,419 PointsI 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.
Marcus Parsons
15,719 PointsDamien, 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
5,459 PointsThis 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!
Marcus Parsons
15,719 PointsAwesome!!! :) Thank you!
John Weland
42,478 PointsJohn Weland
42,478 PointsDude,
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.