# Making JavaScript for Snap! stage

**URL:** <https://forum.snap.berkeley.edu/t/making-javascript-for-snap-stage/12281>\
**Category:** Snap! Editor\
**Tags:** custom-block, forums, javascript\
**Created:** [September 28, 2022, 7:02pm UTC](https://forum.snap.berkeley.edu/t/making-javascript-for-snap-stage/12281 "2022-09-28T19:02:22Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![power\_hack](https://forum.snap.berkeley.edu/letter_avatar_proxy/v4/letter/p/c89c15/32.png) [@power\_hack](https://forum.snap.berkeley.edu/u/power_hack)\
**Post date:** [September 28, 2022, 7:02pm UTC](https://forum.snap.berkeley.edu/t/making-javascript-for-snap-stage/12281/1 "2022-09-28T19:02:22Z")

</div>

I'm learning both JavaScript and Snap!, but I'm having a hard time figuring out how Snap! takes the JavaScript code. I can call the `alert();` function just fine but if I want to draw a line on stage and use the `draw();` function, nothing seems to happen. I'm not sure if the JavaScript function code effects the whole website, or the stage. I think the `draw();` function is working but I'm not understanding how to effect the stage with it.

For an example, I'd like to know hot I could create a costume block with JavaScript to draw a colored in triangle on the stage.

 ![Screenshot 2022-09-28 130126](https://cdn.forum.snap.berkeley.edu/original/3X/d/0/d03fc83933078dd9fda77fce60b5ff4deeb5dca1.png)

 ![Screenshot 2022-09-28 130000](https://cdn.forum.snap.berkeley.edu/original/3X/a/2/a24023a1a4ce1b8f4f6303406152ea3a7674f3c7.png)

Edit:  
I found out the JavaScript code effects the page you are on, but I'm still carious on how to draw on the Snap! canvas for optimizing performance.

 ![Screenshot 2022-09-28 142139](https://cdn.forum.snap.berkeley.edu/original/3X/7/8/782254f0efb90b3e7da71e826b2b95031a7bf9df.png)

---

<div class="post-metadata">

**Author:** ![sarpnt](https://forum.snap.berkeley.edu/user_avatar/forum.snap.berkeley.edu/sarpnt/32/20216_2.png) [@sarpnt](https://forum.snap.berkeley.edu/u/sarpnt)\
**Post date:** [September 28, 2022, 10:00pm UTC](https://forum.snap.berkeley.edu/t/making-javascript-for-snap-stage/12281/2 "2022-09-28T22:00:11Z")

</div>

if you want to learn javascript i'd recommend just making a webpage with a canvas and trying to make some simple games with that first.

afaik snap isn't designed to work nicely with javascript, and isn't a good place to learn it. the function block is only to add bits of functionality that can't already be done in snap.

if you really want to do this or need to do something with performance i would reccomend drawing to the stage trailsCanvas (run `this.trailsCanvas` on the stage)

---

<div class="post-metadata">

**Author:** ![power\_hack](https://forum.snap.berkeley.edu/letter_avatar_proxy/v4/letter/p/c89c15/32.png) [@power\_hack](https://forum.snap.berkeley.edu/u/power_hack)\
**Post date:** [September 29, 2022, 12:08am UTC](https://forum.snap.berkeley.edu/t/making-javascript-for-snap-stage/12281/3 "2022-09-29T00:08:00Z")

</div>

Thanks! I'm trying to optimize some pen functions, for an example, drawing and filling a triangle. I'm making an engine that uses quite a bit of triangles and the method I'm using is effective, but I'd like to make it as efficient as I can.

I'll use `this.trailsCanvas` and see what comes of it. Would you mind letting me know how you found out, so I could better understand how the JavaScript function effects the stage?

---

<div class="post-metadata">

**Author:** ![ego-lay\_atman-bay](https://forum.snap.berkeley.edu/user_avatar/forum.snap.berkeley.edu/ego-lay_atman-bay/32/1395_2.png) [@ego-lay\_atman-bay](https://forum.snap.berkeley.edu/u/ego-lay_atman-bay)\
**Post date:** [September 29, 2022, 1:59am UTC](https://forum.snap.berkeley.edu/t/making-javascript-for-snap-stage/12281/4 "2022-09-29T01:59:40Z")

</div>

If you read through the [snap source code](https://github.com/jmoenig/Snap/tree/v8.0.0), you can learn how to use snap functions.

(click the snap logo, then click download source. You can then click on code in order to see the source code for snap (most of the js is in the `src` folder))

A small tip, whenever you see a function like this

```javascript
IDE_Morph.prototype.setDefaultDesign = function () {
    MorphicPreferences.isFlat = false;
    SpriteMorph.prototype.paletteColor = new Color(30, 30, 30);
    SpriteMorph.prototype.paletteTextColor = new Color(230, 230, 230);
    StageMorph.prototype.paletteTextColor
        = SpriteMorph.prototype.paletteTextColor;
    ...
}

```

In order to access it, you use this function

```javascript
this.parentThatIsA(IDE_Morph).setDefaultDesign();

```

Basically how it works is, take the object from the function definition, in this case `IDE_Morph` (it can also be `StageMorph`, and basically any morph), and put it in the function `this.parentThatIsA()`, in this case it would be `this.parentThatIsA(IDE_Morph)`. Now you can get any property that object has, or use any function that object has. In this case it would be `this.parentThatIsA(IDE_Morph).setDefaultDesign();`.

Of course I like to get the `IDE_Morph` this way

```javascript
world.children[0]

```

because it looks nicer, and also doesn't rely on the function to be ran inside a javascript function block.

To get the `StageMorph` this way, you need to do

```javascript
world.children[0].stage

```

And to get a specific type of morph, like in the function defenitions, just do

```javascript
world.children[0].childThatIsA(StageMorph)

```

(replace `StageMorph` with the morph you want).

---

<div class="post-metadata">

**Author:** ![sarpnt](https://forum.snap.berkeley.edu/user_avatar/forum.snap.berkeley.edu/sarpnt/32/20216_2.png) [@sarpnt](https://forum.snap.berkeley.edu/u/sarpnt)\
**Post date:** [September 29, 2022, 11:41am UTC](https://forum.snap.berkeley.edu/t/making-javascript-for-snap-stage/12281/5 "2022-09-29T11:41:57Z")

</div>

returning `this` in any sprite gives the sprite itself, and `this.parent` is the parent of the sprite (stage parent seems to just be the whole editor), from there i just log it and look through it.

---

<div class="post-metadata">

**Author:** ![sarpnt](https://forum.snap.berkeley.edu/user_avatar/forum.snap.berkeley.edu/sarpnt/32/20216_2.png) [@sarpnt](https://forum.snap.berkeley.edu/u/sarpnt)\
**Post date:** [September 29, 2022, 11:50am UTC](https://forum.snap.berkeley.edu/t/making-javascript-for-snap-stage/12281/6 "2022-09-29T11:50:38Z")

</div>

in that case i would reccomend creating a "draw triangle" block that uses javascript if it's enabled, but can use snap blocks if it's disabled. that way other people can still work with the code easily and shows that it's still possible as a pure snap project.

iirc you can use a try catch from the error catching library to test if javascript is enabled.

oh and since i forgot to make this clear, trailsCanvas is where snap draws pen trails, so you can use it with pen blocks, and it will overwrite any existing pen.

---

<div class="post-metadata">

**Author:** ![18001767679](https://forum.snap.berkeley.edu/letter_avatar_proxy/v4/letter/1/839c29/32.png) [@18001767679](https://forum.snap.berkeley.edu/u/18001767679)\
**Post date:** [September 29, 2022, 2:25pm UTC](https://forum.snap.berkeley.edu/t/making-javascript-for-snap-stage/12281/7 "2022-09-29T14:25:13Z")

</div>

Aww maaaaaaaaaan  
this is certainly not p5.js or canvas(it is a canvas but its not an unpurposed or blank one so you can't draw onto it)  
Learn to use Morphic

edit:actually ur not the only stoopy guy,when i first got a copy of snap 4 arduino(actually that was a pirate \>:C) i tried rect(100,200,100,100); and wondered why it workn't 😕

---

<div class="post-metadata">

**Author:** ![ego-lay\_atman-bay](https://forum.snap.berkeley.edu/user_avatar/forum.snap.berkeley.edu/ego-lay_atman-bay/32/1395_2.png) [@ego-lay\_atman-bay](https://forum.snap.berkeley.edu/u/ego-lay_atman-bay)\
**Post date:** [September 29, 2022, 2:56pm UTC](https://forum.snap.berkeley.edu/t/making-javascript-for-snap-stage/12281/8 "2022-09-29T14:56:53Z")

</div>

The op wants to draw on the snap stage, using pen. I don't think learning morphic would help a whole lot.

---

<div class="post-metadata">

**Author:** ![system](https://cdn.forum.snap.berkeley.edu/original/2X/d/dc8cfa4b1c99bd810b188b58c718084d8f47e271.svg) [@system](https://forum.snap.berkeley.edu/u/system)\
**Post date:** [October 29, 2022, 2:57pm UTC](https://forum.snap.berkeley.edu/t/making-javascript-for-snap-stage/12281/9 "2022-10-29T14:57:52Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.