====== Canvas Plugin ======

---- plugin ----
description: Provide HTML5 Canvas functionality for DokuWiki page.
author     : S.Sahara 
email      : sahara.satoshi@gmail.com 
type       : syntax
lastupdate : 2016-07-14
compatible : 
depends    : inlinejs
conflicts  : 
similar    : 
tags       : chart javascript !experimental

downloadurl: https://github.com/ssahara/dw-plugin-canvas/archive/master.zip
bugtracker : https://github.com/ssahara/dw-plugin-canvas/issues
sourcerepo : https://github.com/ssahara/dw-plugin-canvas
donationurl: 

screenshot_img : 
----

===== Installation =====
Search and install the plugin using the [[plugin:extension|Extension Manager]]. Refer to [[:Plugins]] on how to install plugins manually.

Additionally, [[plugin:inlinejs|Inline JavaScript plugin]] (InlineJS) is required to embed the JavaScript in the DW page.

===== Examples/Usage =====
To prepare a canvas element with given size and id, this plugin uses ''<canvas>'' for markup that is almost same as the "HTML5 Canvas" tag. A difference is that you can provide your own JavaScript to render graphics in the canvas inside the "%%canvas%%" section. 

For example, you can draw two boxes in the canvas of which size is 140x140 pixcels:

<code>
<canvas sample1 140,140>
//onload = function() { draw1(); }; // !! use jQuery instead of "onload"
jQuery( function() { draw1(); });

function draw1() {
  var canvas1 = jQuery('#sample1')[0];
  if ( !canvas1 || !canvas1.getContext ) return false;
  var ctx1 = canvas1.getContext('2d');
  ctx1.fillStyle = "rgb(200,0,0)";
  ctx1.fillRect (10, 10, 55, 50);
  ctx1.fillStyle = "rgba(0, 0, 200, 0.5)";
  ctx1.fillRect (30, 30, 55, 50);
}
</canvas>
</code>

Then you will get a drawing in your DW page. The snippet of HTML is: 

{{ https://raw.github.com/ssahara/dw-plugin-canvas/master/sample1.png}}

<code html>
<canvas class="canvasbox" id="sample1" width="140" height="140">[No canvas support]</canvas>
<script type="text/javascript">
/*<![CDATA[*/
jQuery( function() { draw1(); });
function draw1() {
  var canvas1 = jQuery('#sample1')[0];
  if ( !canvas1 || !canvas1.getContext ) return false;
  var ctx1 = canvas1.getContext('2d');
  ctx1.fillStyle = "rgb(200,0,0)";
  ctx1.fillRect (10, 10, 80, 80);
  ctx1.fillStyle = "rgba(0, 0, 200, 0.5)";
  ctx1.fillRect (60, 60, 130, 130);
}
/*!]]>*/
</script>
</code>


===== Syntax =====

Basic syntax:
<code><canvas id [size]> [script] </canvas></code>


  * **id** : "id" of the canvas, which must be unique in the same DW page.
    * This "id" is used in the script to identify canvas or chart target.

  * **size** : Size of the canvas. (Optional)
    * Default value is ''300px,150px'', which means 300px width and 150px height.
    * When one value is given it is assumed to be the height. 

  * **script** : JavaScript to draw something in the canvas. (Optional)
    * script is embedded in the HTML of the page.
    * In case of no script inside the tag, no script may embedded.


Syntax Variants:

You may draw more complex charts in the canvas using any javascript chart software, such as [[http://www.rgraph.net|RGraph]] and [[http://www.jqplot.com|jqPlot]].
These software require different HTML for chart target; "HTML5 canvas" and "div" section, respectively.  
This plugin is designed to prepare appropriate target for different chart software. Currently, this plugin supports only two software mentioned above. Additionally, each canvas variant prepares small license note underneath of the chart canvas.


<code><canvas:rgraph canvas_id [size]> [script] </canvas></code>

  * indicate to prepare chart target for [[http://www.rgraph.net|RGraph]]. Please see also it's [[http://www.rgraph.net/license|license]] information.
  * HTML output example:\\ <file html>
<canvas class="canvasbox" id="chart1" width="300px" height="300px"></canvas>
<div class="rgraph-license-note" style="width:300px;">
<a href="http://www.rgraph.net/">Powered by RGraph</a>
</div>
</file>


<code><canvas:jqplot canvas_id [size]> [script] </canvas></code>

  * indicate to prepare chart target for [[http://www.jqplot.com|jqPlot]]. Please refer also [[https://bitbucket.org/cleonello/jqplot/overview|jQplot project]] page.
  * HTML output example:\\ <file html>
<div class="jqplot-target" id="chart1" style="width:300px; height:300px;"></div>
<div class="jqplot-license-note" style="width:300px;">
<a href="http://www.jqplot.com/">Powered by jQplot</a>
</div>
</file>


===== Configuration and Settings =====
There are no configuration options for this plugin. 

===== Development =====
This plugin is developed to learn how to incorporate various charts into the DW page and to setup working playground for trials. Therefore, it is rather experimental, especially for syntax variants.

=== Change Log ===
{{rss>https://github.com/ssahara/dw-plugin-canvas/commits/master.atom date 5}}

===== FAQ =====

//[discussions should ideally be deleted and turned into FAQ entries along the way]//

Representing data with the help of charts,graphs,symbols is one of the effective way. With the help of such [[http://www.koolchart.com|data visualization]] items we are able to make data more interactive.

Thanks