4 ms·

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 c

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.

protonfish 11y ago
|0 How's that?
tyingq 11y ago
It's not one line of javascript, but drawing a line with an html5 canvas is fairly straightforward. https://jsfiddle.net/4cwmcagp/ https://jsfiddle.net/4cwmcagp/
- technomalogical 11y ago
  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.
neckro23 11y ago
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.
- DanBC 11y ago
  qbasic: SCREEN 13 LINE (X1, Y1) - (X2, Y2), COLOUR
  - zeckalpha 11y ago
    Maybe there's room for a qbas.js which introduces some helpers like this?
    - voltagex_ 11y ago
      turtle.js please (see another comment about import turtle in Python) https://github.com/davebalmer/turtlewax https://github.com/davebalmer/turtlewax http://berniepope.id.au/html/js-turtle/turtle.html http://berniepope.id.au/html/js-turtle/turtle.html
- iofj 11y ago
  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.
  - billforsternz 11y ago
    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.
dceddia 11y ago
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?
- reitanqild 11y ago
  > 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 https://news.ycombinator.com/item?id=11637866
  - qb45 11y ago
    Welcome to the Internet and let me be your guide: http://www.bing.com/search?q=sarcasm 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.
    - reitanqild 11y ago
      I'm smiling now :-) I thought it was a well intended explanation that just wasn't detailed enough.
- EugeneOZ 11y ago
  In QBasic it takes even less symbols than your response has :)
- dceddia 11y ago
  This was intended as sarcasm ;)
kragen 11y ago
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 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.
- krapp 11y ago
  >and that works. Depends on the browser. IE > 8 doesn't support it.
  - kragen 10y ago
    Are you saying processing.js doesn't work in IE after IE 8?
    - krapp 10y ago
      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 https://developer.mozilla.org/en-US/docs/Web/HTTP/data_URIs

protonfish 11y ago

|0 How's that?

tyingq 11y ago

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

technomalogical 11y ago
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.

neckro23 11y ago

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.

DanBC 11y ago
qbasic: SCREEN 13 LINE (X1, Y1) - (X2, Y2), COLOUR
- zeckalpha 11y ago
  Maybe there's room for a qbas.js which introduces some helpers like this?
  - voltagex_ 11y ago
    turtle.js please (see another comment about import turtle in Python) https://github.com/davebalmer/turtlewax https://github.com/davebalmer/turtlewax http://berniepope.id.au/html/js-turtle/turtle.html http://berniepope.id.au/html/js-turtle/turtle.html
iofj 11y ago
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.
- billforsternz 11y ago
  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.

dceddia 11y ago

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?

reitanqild 11y ago
> 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 https://news.ycombinator.com/item?id=11637866
- qb45 11y ago
  Welcome to the Internet and let me be your guide: http://www.bing.com/search?q=sarcasm 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.
  - reitanqild 11y ago
    I'm smiling now :-) I thought it was a well intended explanation that just wasn't detailed enough.
EugeneOZ 11y ago
In QBasic it takes even less symbols than your response has :)
dceddia 11y ago
This was intended as sarcasm ;)

kragen 11y ago

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 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.

krapp 11y ago
>and that works. Depends on the browser. IE > 8 doesn't support it.
- kragen 10y ago
  Are you saying processing.js doesn't work in IE after IE 8?
  - krapp 10y ago
    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 https://developer.mozilla.org/en-US/docs/Web/HTTP/data_URIs