Hacker News Reader

Comment by EugeneOZ | Hacker News Reader

Is it simple to draw a line in JS? Like in one line of simple and straight code, yes? I mean, not adding some divs to some DOM, but actually drawing a line or circle. Drawing is simplifying things for kids.

View on HN

    var drawing = document.createElement('canvas');
    document.body.appendChild(drawing);
    var ctx = drawing.getContext('2d');
    ctx.beginPath();
    ctx.moveTo(0, 0);
    ctx.lineTo(100, 100);
    ctx.stroke();

There's a bit of ceremony in setting up the canvas, but yes, it's simple.

qbasic:

    SCREEN 13
    LINE (X1, Y1) - (X2, Y2), COLOUR

Maybe there's room for a qbas.js which introduces some helpers like this?

turtle.js please (see another comment about import turtle in Python)

https://github.com/davebalmer/turtlewax

http://berniepope.id.au/html/js-turtle/turtle.html

1) Ok, in firefox I opened the console window. 29 buttons. The one to type this in was the thing at the very bottom that looked like ">> " with no cursor in it indicating that you could type in it.

2) typing your code (on this page) ... nothing happens. Element was added at the bottom of a very large page, element was not visible, so I didn't see anything happen.

3) the added element is a white box on a white background. Grand total indication of it getting added was a small adjustment in the (hidden by default) scrollbar on the right of the page ...

4) after that you want to start people out with paths and stroking and state storing and evaluating ?

Making a program like this that responds to keyboard input at all in javascript is dozens of lines, and you have to know DOM, properties, and event handlers in addition to the base language to make anything happen. Getting keyboard handling good enough to have a simple game ... let's not go there. Hundreds of lines. And of course, doesn't work on your friends machine (different browser ...).

I hope you can see that this is less than optimal to get people exited.

I am one of those guys that thinks web programming sucks, that it's far inferior for most programs as compared to Qt/QML and even to Delphi/VB like languages.

Your little typo is almost Freudian. Yes it's optimal for getting people to exit. But you're right, not so much for getting them excited.

Sure! Just locate the element you want to draw in, set up a 2d context, start a path, move to one end of the line, draw a line, and then stroke that line so it fills in! How much simpler could it be really?

> How much simpler could it be really?

The howto could be a whole lot simpler it seems, see this example, helpfully provided by neckro23 https://news.ycombinator.com/item?id=11637866

Welcome to the Internet and let me be your guide:

http://www.bing.com/search?q=sarcasm

I sincerely wish that the post you linked was sarcastic as well, but it was probably serious which makes the (former) QBasic programmer in me a little bit sad.

I'm smiling now :-)

I thought it was a well intended explanation that just wasn't detailed enough.

In QBasic it takes even less symbols than your response has :)

This was intended as sarcasm ;)

That's really a question of the APIs you're using rather than the language. If you're using a browser, you don't even need JS to draw the line; you can just go to this URL:

    data:text/html,<svg><line x1=0 y1=30 x2=40 y2=50 stroke=black>

If you're using an API other than the browser, it can be super simple. Like, with processing.js, http://sketchpad.cc/sp/pad/view/zdsBK2b9xo/latest consists of:

    line(0, 30, 40, 50);

and that works. (Although you could surely argue that the language of processing.js isn't itself JS, but you can invoke its facilities from JS.)

There are also clumsier ways to draw lines, like with DOM manipulation in SVG or drawing stuff on a <canvas>, and those might be desirable for the extra flexibility they give you. But you don't have to start with them.

>and that works.

Depends on the browser. IE > 8 doesn't support it.

Are you saying processing.js doesn't work in IE after IE 8?

IE 8 and above only supports image data URIs within CSS, link and image tags[0]. Processing.js probably works around that with Canvas or something.

[0]https://developer.mozilla.org/en-US/docs/Web/HTTP/data_URIs

It's not one line of javascript, but drawing a line with an html5 canvas is fairly straightforward. https://jsfiddle.net/4cwmcagp/

If I was going to start a child on coding javascript, I would probably do this or codepen rather than a full fledged text editor, ide, or browser built-in console. Move them to the console once they're comfortable and teach them how to use the debugger.

How's that?

Reply on news.ycombinator.com