Path: csiph.com!usenet.pasdenom.info!news.franciliens.net!news.muarf.org!nntpfeed.proxad.net!proxad.net!feeder2-2.proxad.net!newsfeed.arcor.de!newsspool2.arcor-online.net!news.arcor.de.POSTED!not-for-mail
Content-Type: text/plain; charset="UTF-8"
Message-ID: <3854249.9rPbM97Byf@PointedEars.de>
From: Thomas 'PointedEars' Lahn <PointedEars@web.de>
Reply-To: Thomas 'PointedEars' Lahn <usenet@PointedEars.de>
Organization: PointedEars Software (PES)
Date: Fri, 19 Jul 2013 13:09:46 +0200
User-Agent: KNode/4.10.5
Content-Transfer-Encoding: 8Bit
X-Face: %i>XG-yXR'\"2P/C_aO%~;2o~?g0pPKmbOw^=NT`tprDEf++D.m7"}HW6.#=U:?2GGctkL,f89@H46O$ASoW&?s}.k+&.<b';Md8`dH6iqhT)6C^.Px|[=M@7=Ik[_w<%n1Up"LPQNu2m8|L!/3iby{-]A+#YE}Kl{Cw$\U!kD%K}\2jz"QQP6Uqr],./"?;=4v
Face: iVBORw0KGgoAAAANSUhEUgAAADAAAAAwBAMAAAClLOS0AAAAGFBMVEXTxa4RFk5dUWANED8PFEfy7+MGBiW+n3ZNF/QuAAACaElEQVQ4jVXUwVOcMBQG8Dc7Rc4PUntdWV2uxjDpGaGeozOp1woar4jd5t/v9wLstMwsA/ntlxdCAgUc1hjTc9/JCZfGoo3wG3HdmdAWrIJRHe7GM/TmpY5VFefuVcAkkPbLIaN8rmPmjloyZxgyR3GuJ4K0AGtJ2htz8o7yqikm759fldQXaMpbDzjKAG+8v+AugVTOPO5DOjLvGtUYQwh0CPjnVMyGd+8/GfUB5nLKJDD2aLDh5HYyMDJGDwQIo2ZmZcKbowNmAdB/AzyFhrmF2MHRb0QJJfaAnwGB6orZhoykLzJtGwF/xpYxI1dswomiUj3gTuAIqCn/4C7cULwGNBtwMTk3Y4LfKB5YUaOKBKYtpplm7u0vip8tU1NWWyI/7XdcSuIDoMt6rVHMWT0DbjHPGqDqZVSa6zleLcUTcIKLoMv3ueJluALtAo9B302zPPlrtiVScRdCjXvVh3e3JpYa/jjkuC9N+LrBMlz/eAN4eQijX2EdLo6c5tGGHwLyHFtXk89dDGHwCVhG9T0S/j55AhRZgkMCmUQXJ49TnS1wnQDvw0eAh9ICeMmEFbCnPMFzjAvsWoEWEFdYEx+S0MoUZ1gT1wId8+AF3Bl2OoEu906AUHx5VLw/gXYg/x84loOah/2UYNrgiwSwGO7RfUzVBbx/kgpckumGOi6QirtD6gkLTitbnxNol47S2jVc2vsN5kPqaAHT8uUdAJM4v/DanjYOwmUjWznGfwB7sGtAtor5BgofDuzaRj4kSQAqDakTsKORa3Q3xKi3gE1fhl71KRMqrdZ2AWNNg/YOhQyrVBnb+i+nEg4bsDA+egAAAABJRU5ErkJggg==
Subject: Re: Drawline in javascript?
Newsgroups: comp.lang.javascript
References: <77581952-f439-4315-b1cd-04b9d79bd15b@googlegroups.com> <3401c16a-0d93-4560-a767-6c90292a77d5@googlegroups.com>
MIME-Version: 1.0
Lines: 82
NNTP-Posting-Date: 19 Jul 2013 13:10:00 CEST
NNTP-Posting-Host: 8d57c85f.newsspool2.arcor-online.net
X-Trace: DXC=2ZJ27iCS0h<d8Nb@@ZG@b=A9EHlD;3Yc24Fo<]lROoR18kF<OcfhCO;T`38E:`Ooj8DZm8W4\YJN<b@mF9jNikd5@hR_<@5eU4;Q]Q^;6OacR=
X-Complaints-To: usenet-abuse@arcor.de
Xref: csiph.com comp.lang.javascript:20714

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.