Skip to content

this is interface for drawing on target canvas tag.

License

Notifications You must be signed in to change notification settings

YujiSODE/canvasPenJS

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

49 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

canvasPenJS

this is interface for drawing on target canvas tag.
https://github.com/YujiSODE/canvasPenJS

Copyright (c) 2016 Yuji SODE <yuji.sode@gmail.com>
This software is released under the MIT License.
See LICENSE or http://opensource.org/licenses/mit-license.php


Script

  • canvasPenJS.js
  • canvasPenJS_min.js
    This is minimum white spaces and comments version of "canvasPenJS.js".
  • canvasPenJS_usingMDNCodeSamples.js
    If "canvasPenJS.js" does not work, please try to use this instead.

How to use

  • Call "_canvasPenJS(canvas,rgba,w,plot)" in a html file with canvas tag.

Examples
0) var y,d=window.document.getElementsByTagName('canvas')[0];

  1. [Set drawing]:y=_canvasPenJS(d,'rgba(255,0,0,1)',2,false);

  2. [Remove set interface for drawing, and get log]:y();

  3. [Set plotting]:y=_canvasPenJS(d,'rgba(0,0,255,1)',10,true);

  4. [Remove set interface for plotting, and get log]:y();

  5. [Set plotting with data]:y=_canvasPenJS(d,'rgba(255,0,255,1)',10,"20@+13.14");

  6. [Get log]:y();

Parameters

  • canvas: target canvas tag
  • rgba: color
  • w: line width
  • plot: true|false; true=> plotting, false=> drawing.
    plot(=true) can be a text: a pair of values with @, expressed as "x@y" e.g., "1@2", "10.5@100.31".

Returned value

Function that removes set drawing/plotting interface, and returns log object.
This log object has:

  • time: timestamp
  • d: an array of plots, expressed with x and y coordinates: "x@y".
  • canvasId: id of canvas