This is a read-only archive of the old Scratch 1.x Forums.
Try searching the current Scratch discussion forums.

#26 2011-12-01 15:39:19

scratchisthebest
Scratcher
Registered: 2009-02-08
Posts: 500+

Re: Scratch Canvas Porting

sry 4 dblpost but (Translation: Sorry for the double-post but...)

midnightleopard wrote:

...
It looked like this:

Code:

setInterval(function(){
clear();
draw();
drive();
}, 15);

Oh yayayayayayayay! It works!


bye 1.4, we all loved you. but we all outgrew the site. 2.0 is a welcome change.
http://scratch.mit.edu/img/Pico3-med.pnghttp://scratch.mit.edu/img/Pico3-med.pnghttp://scratch.mit.edu/img/Pico3-med.pnghttp://scratch.mit.edu/img/Pico3-med.pnghttp://scratch.mit.edu/img/Pico3-med.png

Offline

 

#27 2011-12-01 16:54:25

midnightleopard
Scratcher
Registered: 2007-09-13
Posts: 1000+

Re: Scratch Canvas Porting

scratchisthebest wrote:

Well, there isn't a magic button to make a project into HTML5. You'll need to get your hands dirty in Canvas.

==Scratch to HTML5 Mini-Tutorial==
1. Go to the library and find a good JS Canvas book.
2. Use the tools presented in the book to make a copy of a Scratch project.
3. Share.
4. Profit!!!111!!1!
==End of Mini-Tutorial==

There aren't books about canvas yet because it is still in developement.


http://pwp.wizards.com/5103673563/Scorecards/Landscape.png

Offline

 

#28 2011-12-01 16:56:35

midnightleopard
Scratcher
Registered: 2007-09-13
Posts: 1000+

Re: Scratch Canvas Porting

I guess one question still remains...
http://textspace.net/img/1322776553_00279d01_1322776553.gif


http://pwp.wizards.com/5103673563/Scorecards/Landscape.png

Offline

 

#29 2011-12-01 17:05:41

flashgocrazy
Scratcher
Registered: 2011-01-12
Posts: 500+

Re: Scratch Canvas Porting

midnightleopard wrote:

I guess one question still remains...
http://textspace.net/img/1322776553_002 … 776553.gif

MEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE!!!!!


◕‿◕

Offline

 

#30 2011-12-01 17:14:54

Magnie
Scratcher
Registered: 2007-12-12
Posts: 1000+

Re: Scratch Canvas Porting

The most I can see from the project is that you coded everything in JS and made the screen with a variable called canvas. And the HTML5 element canvas.

Pretty cool.

Last edited by Magnie (2011-12-01 17:19:50)

Offline

 

#31 2011-12-01 17:29:50

ohaiderstudios
Scratcher
Registered: 2010-10-31
Posts: 100+

Re: Scratch Canvas Porting

midnightleopard wrote:

I guess one question still remains...
http://textspace.net/img/1322776553_002 … 776553.gif

IIIIIIIII DDDDDDDOOOOOOOOOOOO!!!!!!!!!!!!!!!!!!!  big_smile


Fork Clamor on GitHub!

Offline

 

#32 2011-12-01 22:52:27

MoreGamesNow
Scratcher
Registered: 2009-10-12
Posts: 1000+

Re: Scratch Canvas Porting

Magnie wrote:

The most I can see from the project is that you coded everything in JS and made the screen with a variable called canvas. And the HTML5 element canvas.

Pretty cool.

Canvas is actually a HTML tag, though you're correct in a certain sense, because you do have to set a variable to the tag (i.e. document.getElementById("CanvasId") )

Last edited by MoreGamesNow (2011-12-01 22:52:34)


http://images2.layoutsparks.com/1/218929/rubiks-cube-animated-rotating.gif
"Cogito ergo sum" --  I think, therefore I am

Offline

 

#33 2011-12-01 23:09:31

Magnie
Scratcher
Registered: 2007-12-12
Posts: 1000+

Re: Scratch Canvas Porting

MoreGamesNow wrote:

Magnie wrote:

The most I can see from the project is that you coded everything in JS and made the screen with a variable called canvas. And the HTML5 element canvas.

Pretty cool.

Canvas is actually a HTML tag, though you're correct in a certain sense, because you do have to set a variable to the tag (i.e. document.getElementById("CanvasId") )

HTML "tag" and "element" are the same thing.  tongue

Offline

 

#34 2011-12-02 05:53:56

Hardmath123
Scratcher
Registered: 2010-02-19
Posts: 1000+

Re: Scratch Canvas Porting

Of course, you could document.write or body.innerHTML+= it and have almost NO html (except for the import statement).


Hardmaths-MacBook-Pro:~ Hardmath$ sudo make $(whoami) a sandwich

Offline

 

#35 2011-12-02 15:41:52

scratchisthebest
Scratcher
Registered: 2009-02-08
Posts: 500+

Re: Scratch Canvas Porting

midnightleopard wrote:

scratchisthebest wrote:

Well, there isn't a magic button to make a project into HTML5. You'll need to get your hands dirty in Canvas.

==Scratch to HTML5 Mini-Tutorial==
1. Go to the library and find a good JS Canvas book.
2. Use the tools presented in the book to make a copy of a Scratch project.
3. Share.
4. Profit!!!111!!1!
==End of Mini-Tutorial==

There aren't books about canvas yet because it is still in developement.

Then why do I have one?  smile
It's called Foundation HTML5 Canvas for Games and Entertainment. I like it.


bye 1.4, we all loved you. but we all outgrew the site. 2.0 is a welcome change.
http://scratch.mit.edu/img/Pico3-med.pnghttp://scratch.mit.edu/img/Pico3-med.pnghttp://scratch.mit.edu/img/Pico3-med.pnghttp://scratch.mit.edu/img/Pico3-med.pnghttp://scratch.mit.edu/img/Pico3-med.png

Offline

 

#36 2011-12-02 16:18:25

midnightleopard
Scratcher
Registered: 2007-09-13
Posts: 1000+

Re: Scratch Canvas Porting

scratchisthebest wrote:

midnightleopard wrote:

scratchisthebest wrote:

Well, there isn't a magic button to make a project into HTML5. You'll need to get your hands dirty in Canvas.

==Scratch to HTML5 Mini-Tutorial==
1. Go to the library and find a good JS Canvas book.
2. Use the tools presented in the book to make a copy of a Scratch project.
3. Share.
4. Profit!!!111!!1!
==End of Mini-Tutorial==

There aren't books about canvas yet because it is still in developement.

Then why do I have one?  smile
It's called Foundation HTML5 Canvas for Games and Entertainment. I like it.

woa.
http://bucultureshock.com/wp-content/uploads/2011/10/mind-blown-11.jpeg

I taught myself canvas but I've got to get that.


http://pwp.wizards.com/5103673563/Scorecards/Landscape.png

Offline

 

#37 2011-12-02 17:11:55

nXIII
Community Moderator
Registered: 2009-04-21
Posts: 1000+

Re: Scratch Canvas Porting

Magnie wrote:

HTML "tag" and "element" are the same thing.  tongue

Tag usually refers to a <>'d piece of the source code, like '<p class="important">'.
Element usually refers to a node in the DOM that represents a tag.

So in this case, the '<canvas...>' is a tag, and the corresponding element is retrieved in the script using the getElementById method.


nXIII

Offline

 

#38 2011-12-02 23:01:47

MoreGamesNow
Scratcher
Registered: 2009-10-12
Posts: 1000+

Re: Scratch Canvas Porting

To expand to those of you who want to know (sorry midnightleopard for stealing your thunder  tongue ), you have make a canvas element, give it an "id", and then you can use JavaScript to draw on the canvas.  Here is some sample code (you have a Canvas Tag with the id of "cvs")

Code:

var c_cvs = document.getElementById("cvs");     // basically sets c_cvs to the canvas tag
var context = c_cvs.getContext("2d");                // you'll use this to draw to the canvas
context.fillRect(10,10,30,50);

/* the above script makes a rectangle,
with one corner at the coordinates 10,10,
and the coordinates of the second corner
at (10+30),(10+50).  It is basically
context.fillRect(x,y,width,height)
*/

Of course, there are tons of different keywords to learn.  You can draw lines, past images, draw arcs, text, and many other cool things!

Last edited by MoreGamesNow (2011-12-02 23:02:13)


http://images2.layoutsparks.com/1/218929/rubiks-cube-animated-rotating.gif
"Cogito ergo sum" --  I think, therefore I am

Offline

 

#39 2011-12-02 23:11:32

MathWizz
Scratcher
Registered: 2009-08-31
Posts: 1000+

Re: Scratch Canvas Porting

@MoreGamesNow you forgot that the canvas id is 'poop'.  lol


http://block.site90.net/scratch.mit/text.php?size=30&amp;text=%20A%20signature!&amp;color=333333

Offline

 

#40 2011-12-03 09:35:54

MoreGamesNow
Scratcher
Registered: 2009-10-12
Posts: 1000+

Re: Scratch Canvas Porting

MathWizz wrote:

@MoreGamesNow you forgot that the canvas id is 'poop'.  lol

I knew I forgot something!  big_smile


http://images2.layoutsparks.com/1/218929/rubiks-cube-animated-rotating.gif
"Cogito ergo sum" --  I think, therefore I am

Offline

 

#41 2011-12-03 10:11:52

cocolover76
Scratcher
Registered: 2011-10-09
Posts: 500+

Re: Scratch Canvas Porting

cocolover76 wrote:

You should switch to SVG, that way you don't have to use a separate element for the score.

There are books on SVG.
Thick ones.
There's even more support for SVG than Canvas.


http://i.imgur.com/HfEPZ.gifhttp://i.imgur.com/pvKb6.png

Offline

 

#42 2011-12-04 13:54:00

MathWizz
Scratcher
Registered: 2009-08-31
Posts: 1000+

Re: Scratch Canvas Porting

And the reason you can't have text on a canvas is...?


http://block.site90.net/scratch.mit/text.php?size=30&amp;text=%20A%20signature!&amp;color=333333

Offline

 

#43 2011-12-04 16:27:39

scratchisthebest
Scratcher
Registered: 2009-02-08
Posts: 500+

Re: Scratch Canvas Porting

MathWizz wrote:

And the reason you can't have text on a canvas is...?

WRONG!!!!!1!11!111  tongue
sorry... I had to do that.

Code:

var poopy = document.getElementById("poop");
var pen = poopy.getContext("2d");
var text = "Hello canvassssssssy";
var x = 40;
var y = 40;
pen.fillText(text, x, y);

bye 1.4, we all loved you. but we all outgrew the site. 2.0 is a welcome change.
http://scratch.mit.edu/img/Pico3-med.pnghttp://scratch.mit.edu/img/Pico3-med.pnghttp://scratch.mit.edu/img/Pico3-med.pnghttp://scratch.mit.edu/img/Pico3-med.pnghttp://scratch.mit.edu/img/Pico3-med.png

Offline

 

#44 2011-12-04 17:28:31

MathWizz
Scratcher
Registered: 2009-08-31
Posts: 1000+

Re: Scratch Canvas Porting

It was a question. -.-


http://block.site90.net/scratch.mit/text.php?size=30&amp;text=%20A%20signature!&amp;color=333333

Offline

 

#45 2011-12-04 17:59:17

scratchisthebest
Scratcher
Registered: 2009-02-08
Posts: 500+

Re: Scratch Canvas Porting

MathWizz wrote:

It was a question. -.-

oh. :::)


bye 1.4, we all loved you. but we all outgrew the site. 2.0 is a welcome change.
http://scratch.mit.edu/img/Pico3-med.pnghttp://scratch.mit.edu/img/Pico3-med.pnghttp://scratch.mit.edu/img/Pico3-med.pnghttp://scratch.mit.edu/img/Pico3-med.pnghttp://scratch.mit.edu/img/Pico3-med.png

Offline

 

#46 2011-12-04 19:00:28

jji7skyline
Scratcher
Registered: 2010-03-08
Posts: 1000+

Re: Scratch Canvas Porting

Cool!


I don't know why you say goodbye, I say hello!  big_smile

Offline

 

#47 2011-12-04 19:40:16

midnightleopard
Scratcher
Registered: 2007-09-13
Posts: 1000+

Re: Scratch Canvas Porting

Actually, you CAN have text in canvas and I knew that. I was just being lazy. Also there are compatibility issues with text in canvas, but there are work arounds.

I have seen SVG, but I love canvas to much to learn another.


http://pwp.wizards.com/5103673563/Scorecards/Landscape.png

Offline

 

#48 2013-01-27 22:53:09

Proanimation
Scratcher
Registered: 2011-08-09
Posts: 47

Re: Scratch Canvas Porting

Good job with making the port! Also I created a website just for HTML5 canvas games: www.html5gamer.weebly.com

Also stick with canvas because SVG doesn'tn support good fast drawing. I am currently trying to make a .exe file to convert .sb to HTML5.

Offline

 

#49 2013-01-28 21:56:53

nathanprocks
Scratcher
Registered: 2011-04-14
Posts: 1000+

Re: Scratch Canvas Porting

Necropost ^^
I don't remember if I have seen this before, but it would be awesome if someone wrote a JS library that uses Scratch-like commands!


http://carrot.cassiedragonandfriends.org/Scratch_Signature/randomsig.php
http://trinary.site40.net/images/scratchrank.php?username=nathanprocks&amp;display=small

Offline

 

#50 2013-02-11 19:57:18

Proanimation
Scratcher
Registered: 2011-08-09
Posts: 47

Re: Scratch Canvas Porting

nathanprocks wrote:

Necropost ^^
I don't remember if I have seen this before, but it would be awesome if someone wrote a JS library that uses Scratch-like commands!

Good idea, I am going to make that JS library!

Offline

 

Board footer