Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #20714

Re: Drawline in javascript?

Show key headers only | View raw

jonas.thornvall@gmail.com wrote:

> jonas.t...@gmail.com:
>> I see examples using 2 parameters for moveTo and lineTo
>> 
>> Is there no drawline using 4 parameters drawline((x,y)(x,y))
> 
> I found a library at
> http://www.walterzorn.de/en/jsgraphics/jsgraphics_e.htm#download

Apparently Walter Zorn's code *still* ranges high among the worst script 
code that I have ever seen.

That said, his is a completely different approach there that does _not_ use 
the Canvas API but emulates it (poorly) with many HTML elements.  No wonder, 
it is hopelessly outdated (this particular “gem” was last updated in 2009), 
while Canvas is a new feature that is supposed to become a Web Standard with 
HTML5.

And do you really need an entire 24K library for something as simple as 
drawing a line?

  /* 99 bytes _extra_, newline counts as 1 */
  function drawLine (context, x1, y1, x2, y2)
  {
    context.moveTo(x1, y1);
    context.lineTo(x2, y2);
  }

  var canvas = document.getElementById("myCanvas");
  var context = canvas.getContext("2d");
  context.beginPath();
  drawLine(context, 23, 42, 36, 47);
  context.stroke();

or more runtime-efficient and object-oriented, for example (untested):

  /* 700 bytes _extra_, newline counts as 1 */
  function MyCanvasError (sMessage)
  {
    this.message = sMessage;
  }

  function MyCanvas (canvas)
  {
    if (typeof canvas.getContext != "function")
    {
      throw new TypeError("Canvas expected");
    }

    var context = canvas.getContext("2d");

    if (!context)
    {
      throw new MyCanvasError("Cannot get 2D context");
    }

    this.context = context;
  }

  /* So we can avoid augmenting a host object */
  MyCanvas.prototype.contextMethod = function (method) {
    var context = this.context;
    return context[method].apply(context, [].slice.call(arguments, 1));
  };

  MyCanvas.prototype.drawLine = function (x1, y1, x2, y2) {
    var context = this.context;
    context.moveTo(x1, y1);
    return context.lineTo(x2, y2);
  };

  var myCanvas = new MyCanvas(document.getElementById("myCanvas"));
  myCanvas.contextMethod("beginPath");
  myCanvas.drawLine(23, 42, 36, 47);
  myCanvas.contextMethod("stroke");

-- 
PointedEars

Twitter: @PointedEars2
Please do not Cc: me. / Bitte keine Kopien per E-Mail.

Back to comp.lang.javascript | Previous | Next — Previous in thread | Next in thread | Find similar | Unroll thread

Thread

Drawline in javascript? jonas.thornvall@gmail.com - 2013-07-19 01:50 -0700
  Re: Drawline in javascript? Martin Honnen <mahotrash@yahoo.de> - 2013-07-19 11:12 +0200
    Re: Drawline in javascript? jonas.thornvall@gmail.com - 2013-07-19 02:30 -0700
  Re: Drawline in javascript? "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2013-07-19 11:15 +0200
  Re: Drawline in javascript? jonas.thornvall@gmail.com - 2013-07-19 02:23 -0700
    Re: Drawline in javascript? Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2013-07-19 13:09 +0200
      Re: Drawline in javascript? jonas.thornvall@gmail.com - 2013-07-19 09:15 -0700
        Re: Drawline in javascript? Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2013-07-19 20:08 +0200
          Re: Drawline in javascript? jonas.thornvall@gmail.com - 2013-07-19 12:15 -0700
            Re: Drawline in javascript? Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2013-07-19 21:42 +0200
              Re: Drawline in javascript? jonas.thornvall@gmail.com - 2013-07-19 12:44 -0700
              Re: Drawline in javascript? jonas.thornvall@gmail.com - 2013-07-19 12:47 -0700
                Re: Drawline in javascript? jonas.thornvall@gmail.com - 2013-07-19 12:50 -0700
        Re: Drawline in javascript? Martin Leese <please@see.Web.for.e-mail.INVALID> - 2013-07-19 13:00 -0600
          Re: Drawline in javascript? jonas.thornvall@gmail.com - 2013-07-19 12:06 -0700
            Re: Drawline in javascript? Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2013-07-19 21:34 +0200
            Re: Drawline in javascript? Tim Streater <timstreater@greenbee.net> - 2013-07-19 21:17 +0100
              Re: Drawline in javascript? jonas.thornvall@gmail.com - 2013-07-19 13:20 -0700
                Re: Drawline in javascript? "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2013-07-19 13:32 -0700
                Re: Drawline in javascript? jonas.thornvall@gmail.com - 2013-07-19 13:39 -0700
                Re: Drawline in javascript? "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2013-07-19 13:53 -0700
                Re: Drawline in javascript? jonas.thornvall@gmail.com - 2013-07-19 14:04 -0700
                Re: Drawline in javascript? jonas.thornvall@gmail.com - 2013-07-19 14:17 -0700
                Re: Drawline in javascript? Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2013-07-19 23:27 +0200
                Re: Drawline in javascript? jonas.thornvall@gmail.com - 2013-07-19 15:10 -0700
                Re: Drawline in javascript? jonas.thornvall@gmail.com - 2013-07-19 15:21 -0700
                Re: Drawline in javascript? Scott Sauyet <scott@sauyet.com> - 2013-07-20 17:54 +0000
                Re: Drawline in javascript? jonas.thornvall@gmail.com - 2013-07-20 13:49 -0700
              Re: Drawline in javascript? jonas.thornvall@gmail.com - 2013-07-19 13:23 -0700
              Re: Drawline in javascript? jonas.thornvall@gmail.com - 2013-07-19 13:30 -0700
              Re: Drawline in javascript? "ViLco" <villiber@tin.it> - 2013-07-23 14:59 +0200
            Re: Drawline in javascript? Martin Leese <please@see.Web.for.e-mail.INVALID> - 2013-07-19 14:30 -0600
              Re: Drawline in javascript? jonas.thornvall@gmail.com - 2013-07-19 13:40 -0700
      Re: Drawline in javascript? "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2013-07-19 13:25 -0700
        Re: Drawline in javascript? Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2013-07-19 22:56 +0200
  Re: Drawline in javascript? Ken <so@abdiassoftware.com> - 2013-08-26 22:08 -0500
    Re: Drawline in javascript? Dr J R Stockton <reply1300@merlyn.demon.co.uk.invalid> - 2013-08-28 19:54 +0100
      Re: Drawline in javascript? Ken <usenet-so@abdiassoftware.com> - 2013-08-28 18:56 -0500
        Re: Drawline in javascript? Dr J R Stockton <reply1300@merlyn.demon.co.uk.invalid> - 2013-08-30 20:17 +0100
    Re: Drawline in javascript? Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2013-09-01 16:18 +0200

csiph-web