CINXE.COM

<!DOCTYPE html> <html lang="en" dir="ltr" class="no-js"> <head> <meta charset="utf-8" /> <title>plugin:canvas [DokuWiki]</title> <meta name="generator" content="DokuWiki"/> <meta name="theme-color" content="#008800"/> <meta name="robots" content="index,follow"/> <meta name="keywords" content="plugin,canvas"/> <link rel="search" type="application/opensearchdescription+xml" href="/lib/exe/opensearch.php" title="DokuWiki"/> <link rel="start" href="/"/> <link rel="contents" href="/plugin:canvas?do=index" title="Sitemap"/> <link rel="manifest" href="/lib/exe/manifest.php"/> <link rel="alternate" type="application/rss+xml" title="Recent Changes" href="/feed.php"/> <link rel="alternate" type="application/rss+xml" title="Current namespace" href="/feed.php?mode=list&ns=plugin"/> <link rel="edit" title="Edit this page" href="/plugin:canvas?do=edit"/> <link rel="alternate" type="text/html" title="Plain HTML" href="/_export/xhtml/plugin:canvas"/> <link rel="alternate" type="text/plain" title="Wiki Markup" href="/_export/raw/plugin:canvas"/> <link rel="canonical" href="https://www.dokuwiki.org/plugin:canvas"/> <link rel="stylesheet" href="/lib/exe/css.php?t=dokuwiki&tseed=f1005bad3d81fc9c803c7f93d32a390e"/> <script >var NS='plugin';var JSINFO = {"plugins":{"edittable":{"default columnwidth":""}},"id":"plugin:canvas","namespace":"plugin","ACT":"show","useHeadingNavigation":0,"useHeadingContent":0};(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement);</script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js" defer="defer"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js" defer="defer"></script> <script src="/lib/exe/js.php?t=dokuwiki&tseed=f1005bad3d81fc9c803c7f93d32a390e&lang=en" defer="defer"></script> <meta name="viewport" content="width=device-width,initial-scale=1" /> <link rel="shortcut icon" href="/lib/tpl/dokuwiki/images/favicon.ico" /> <link rel="apple-touch-icon" href="/lib/tpl/dokuwiki/images/apple-touch-icon.png" /> <meta name="verify-v1" content="OVxl3gsCv2MhZqh1cBQyl0JytWXSwXMjyvwc+4w3WtA=" /> <meta name="google-site-verification" content="YhTVK69hW94ZXUtc2zSLPxTkZKbZIn0zK67mz5WQB-E" />  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-83791-1"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-83791-1', { 'anonymize_ip': true }); </script> </head> <body> <div id="dokuwiki__site"><div id="dokuwiki__top" class="site dokuwiki mode_show tpl_dokuwiki showSidebar hasSidebar">  <header id="dokuwiki__header"><div class="pad group"> <div class="headings group"> <ul class="a11y skip"> <li><a href="#dokuwiki__content">skip to content</a></li> </ul> <h1 class="logo"><a href="/start" accesskey="h" title="Home [h]"><img src="/lib/tpl/dokuwiki/images/logo.png" width="64" height="64" alt="" /><span>DokuWiki</span></a></h1> <p class="claim">It's better when it's simple</p> </div> <div class="tools group">  <div id="dokuwiki__usertools"> <h3 class="a11y">User Tools</h3> <ul> <li class="action login"><a href="/plugin:canvas?do=login&sectok=" title="Log In" rel="nofollow"><span>Log In</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 17.25V14H3v-4h7V6.75L15.25 12 10 17.25M8 2h9a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2v-4h2v4h9V4H8v4H6V4a2 2 0 0 1 2-2z"/></svg></a></li> </ul> </div>  <div id="dokuwiki__sitetools"> <h3 class="a11y">Site Tools</h3> <form action="/start" method="get" role="search" class="search doku_form" id="dw__search" accept-charset="utf-8"><input type="hidden" name="do" value="search" /><input type="hidden" name="id" value="plugin:canvas" /><div class="no"><input name="q" type="text" class="edit" title="[F]" accesskey="f" placeholder="Search" autocomplete="on" id="qsearch__in" value="" /><button value="1" type="submit" title="Search">Search</button><div id="qsearch__out" class="ajax_qsearch JSpopup"></div></div></form> <div class="mobileTools"> <form action="/doku.php" method="get" accept-charset="utf-8"><div class="no"><input type="hidden" name="id" value="plugin:canvas" /><select name="do" class="edit quickselect" title="Tools"><option value="">Tools</option><optgroup label="Page Tools"><option value="edit">Edit this page</option><option value="revisions">Old revisions</option><option value="backlink">Backlinks</option></optgroup><optgroup label="Site Tools"><option value="recent">Recent Changes</option><option value="media">Media Manager</option><option value="index">Sitemap</option></optgroup><optgroup label="User Tools"><option value="login">Log In</option></optgroup></select><button type="submit">></button></div></form> </div> <ul> <li class="action recent"><a href="/plugin:canvas?do=recent" title="Recent Changes [r]" rel="nofollow" accesskey="r">Recent Changes</a></li><li class="action media"><a href="/plugin:canvas?do=media&ns=plugin" title="Media Manager" rel="nofollow">Media Manager</a></li><li class="action index"><a href="/plugin:canvas?do=index" title="Sitemap [x]" rel="nofollow" accesskey="x">Sitemap</a></li> </ul> </div> </div>  <div class="breadcrumbs"> <div class="trace"><span class="bchead">Trace:</span> <span class="bcsep">•</span> <span class="curid"><bdi><a href="/plugin:canvas" class="breadcrumbs" title="plugin:canvas">canvas</a></bdi></span></div> </div> <hr class="a11y" /> </div></header> <div class="wrapper group">  <nav id="dokuwiki__aside" aria-label="Sidebar"><div class="pad aside include group"> <h3 class="toggle">Sidebar</h3> <div class="content"><div class="group"> <p> <strong>Learn about DokuWiki</strong> </p> <ul> <li class="level1"><div class="li"> <a href="/features" class="wikilink1" title="features" data-wiki-id="features">Features</a> & <a href="/blogroll" class="wikilink1" title="blogroll" data-wiki-id="blogroll">reviews</a> </div> </li> <li class="level1"><div class="li"> <a href="/install" class="wikilink1" title="install" data-wiki-id="install">Installation guide</a></div> </li> <li class="level1"><div class="li"> <a href="/manual" class="wikilink1" title="manual" data-wiki-id="manual">User manual</a> & <a href="/wiki:syntax" class="wikilink1" title="wiki:syntax" data-wiki-id="wiki:syntax">syntax</a></div> </li> <li class="level1"><div class="li"> <a href="/changes" class="wikilink1" title="changes" data-wiki-id="changes">Release notes</a></div> </li> <li class="level1"><div class="li"> <a href="/faq" class="wikilink1" title="faq" data-wiki-id="faq">FAQ</a></div> </li> </ul> <p> <strong>Advanced Use</strong> </p> <ul> <li class="level1"><div class="li"> <a href="/extensions" class="wikilink1" title="extensions" data-wiki-id="extensions">Extensions</a></div> </li> <li class="level1"><div class="li"> <a href="/development" class="wikilink1" title="development" data-wiki-id="development">Development manual</a></div> </li> </ul> <p> <strong>Corporate Use</strong> </p> <ul> <li class="level1"><div class="li"> <a href="/faq:support" class="wikilink1" title="faq:support" data-wiki-id="faq:support">Get support</a></div> </li> <li class="level1"><div class="li"> <a href="/donate" class="wikilink1" title="donate" data-wiki-id="donate">Donations</a></div> </li> </ul> <p> <strong>Our Community</strong> </p> <ul> <li class="level1"><div class="li"> <a href="/teams:getting_involved" class="wikilink1" title="teams:getting_involved" data-wiki-id="teams:getting_involved">Get involved</a></div> </li> <li class="level1"><div class="li"> <a href="/dokuinstall" class="wikilink1" title="dokuinstall" data-wiki-id="dokuinstall">Users</a></div> </li> <li class="level1"><div class="li"> <a href="http://forum.dokuwiki.org" class="urlextern" title="http://forum.dokuwiki.org">User forum</a></div> </li> <li class="level1"><div class="li"> <a href="/mailinglist" class="wikilink1" title="mailinglist" data-wiki-id="mailinglist">Development mailinglist</a></div> </li> </ul> <hr /> <p> Follow us on <a href="https://phpc.social/@dokuwiki" class="urlextern" title="https://phpc.social/@dokuwiki">Mastodon</a> and other <a href="/social" class="wikilink1" title="social" data-wiki-id="social">social networks</a>. </p> <p> <a href="/privacy" class="wikilink1" title="privacy" data-wiki-id="privacy">Our Privacy Policy</a> </p> </div></div> </div></nav>  <main id="dokuwiki__content"><div class="pad group"> <div class="pageId"><span>plugin:canvas</span></div> <div class="page group">   <div id="dw__toc" class="dw__toc"> <h3 class="toggle">Table of Contents</h3> <div> <ul class="toc"> <li class="level1"><div class="li"><a href="#canvas_plugin">Canvas Plugin</a></div> <ul class="toc"> <li class="level2"><div class="li"><a href="#installation">Installation</a></div></li> <li class="level2"><div class="li"><a href="#examples_usage">Examples/Usage</a></div></li> <li class="level2"><div class="li"><a href="#syntax">Syntax</a></div></li> <li class="level2"><div class="li"><a href="#configuration_and_settings">Configuration and Settings</a></div></li> <li class="level2"><div class="li"><a href="#development">Development</a></div></li> <li class="level2"><div class="li"><a href="#faq">FAQ</a></div></li> </ul></li> </ul> </div> </div>  <h1 class="sectionedit1" id="canvas_plugin">Canvas Plugin</h1> <div class="level1"> <div class="pluginrepo_entry"><div class="usageInfo"><div class="compatibility"><p class="label">Compatible with DokuWiki</p><p class="nothing">No compatibility info given!</p></div><ul class="actions"><li><a class="download" href="https://github.com/ssahara/dw-plugin-canvas/archive/master.zip">Download</a></li><li><a class="bugs" href="https://github.com/ssahara/dw-plugin-canvas/issues">Report bugs</a></li></ul><div class="clearer"></div></div><div class="mainInfo"><p class="description"><a class="media" href="/plugins"><img alt="plugin" class="medialeft" src="/lib/plugins/pluginrepo/images/dwplugin.png" width="60" height="60" /></a> Provide HTML5 Canvas functionality for DokuWiki page.</p></div><div class="metaInfo"><dl><dt>Last updated on</dt><dd>2016-07-14</dd><dt>Provides</dt><dd><a href="/plugins?plugintype=1#extension__table" class="wikilink1" title="List all Syntax plugins">Syntax</a></dd><dt>Repository</dt><dd><a class="urlextern" href="https://github.com/ssahara/dw-plugin-canvas">Source</a></dd><dt>Requires</dt><dd><a href="/plugin:inlinejs" class="wikilink1" title="plugin:inlinejs" data-wiki-id="plugin:inlinejs">inlinejs</a></dd></dl></div><div class="moreInfo"><div class="notify"><p>This extension has not been updated in over 2 years. It may no longer be maintained or supported and may have compatibility issues.</p></div><p class="tags">Tagged with <a href="/plugins?plugintag=%21experimental#extension__table" class="wikilink1" title="List all plugins with this tag">!experimental</a>, <a href="/plugins?plugintag=chart#extension__table" class="wikilink1" title="List all plugins with this tag">chart</a>, <a href="/plugins?plugintag=javascript#extension__table" class="wikilink1" title="List all plugins with this tag">javascript</a></p></div><div class="authorInfo"><strong>By <a href="mailto:sahara%20%5Bdot%5D%20satoshi%20%5Bat%5D%20gmail%20%5Bdot%5D%20com" class="mail" title="sahara [dot] satoshi [at] gmail [dot] com">S.Sahara</a></strong><ul><li><a href="/plugin:medialist" class="wikilink1" title="plugin:medialist" data-wiki-id="plugin:medialist">medialist</a></li> <li><a href="/plugin:numberedheadings" class="wikilink1" title="plugin:numberedheadings" data-wiki-id="plugin:numberedheadings">numberedheadings</a></li> <li><a href="/plugin:typography" class="wikilink1" title="plugin:typography" data-wiki-id="plugin:typography">typography</a></li> <li><a href="/plugin:abbr" class="wikilink1" title="plugin:abbr" data-wiki-id="plugin:abbr">abbr</a></li> <li><a href="/plugin:gview" class="wikilink1" title="plugin:gview" data-wiki-id="plugin:gview">gview</a></li> <li><a href="/plugin:inlinejs" class="wikilink1" title="plugin:inlinejs" data-wiki-id="plugin:inlinejs">inlinejs</a></li> <li><a href="/plugin:toctweak" class="wikilink1" title="plugin:toctweak" data-wiki-id="plugin:toctweak">toctweak</a></li> <li><a href="/plugin:exttab3" class="wikilink1" title="plugin:exttab3" data-wiki-id="plugin:exttab3">exttab3</a></li> <li><a href="/plugin:pagetitle" class="wikilink1" title="plugin:pagetitle" data-wiki-id="plugin:pagetitle">pagetitle</a></li> <li><a href="/plugin:commentsyntax" class="wikilink1" title="plugin:commentsyntax" data-wiki-id="plugin:commentsyntax">commentsyntax</a></li> <li>and 3 more</li></ul></div></div> </div> <div class="secedit editbutton_section editbutton_1"><form class="button btn_secedit" method="post" action="/plugin:canvas"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="rev" value="1527707600" /><input type="hidden" name="summary" value="[Canvas Plugin] " /><input type="hidden" name="target" value="section" /><input type="hidden" name="hid" value="canvas_plugin" /><input type="hidden" name="codeblockOffset" value="0" /><input type="hidden" name="range" value="1-564" /><button type="submit" title="Canvas Plugin">Edit</button></div></form></div> <h2 class="sectionedit2" id="installation">Installation</h2> <div class="level2"> <p> Search and install the plugin using the <a href="/plugin:extension" class="wikilink1" title="plugin:extension" data-wiki-id="plugin:extension">Extension Manager</a>. Refer to <a href="/plugins" class="wikilink1" title="plugins" data-wiki-id="plugins">Plugins</a> on how to install plugins manually. </p> <p> Additionally, <a href="/plugin:inlinejs" class="wikilink1" title="plugin:inlinejs" data-wiki-id="plugin:inlinejs">Inline JavaScript plugin</a> (InlineJS) is required to embed the JavaScript in the DW page. </p> </div> <div class="secedit editbutton_section editbutton_2"><form class="button btn_secedit" method="post" action="/plugin:canvas"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="rev" value="1527707600" /><input type="hidden" name="summary" value="[Installation] " /><input type="hidden" name="target" value="section" /><input type="hidden" name="hid" value="installation" /><input type="hidden" name="codeblockOffset" value="0" /><input type="hidden" name="range" value="565-851" /><button type="submit" title="Installation">Edit</button></div></form></div> <h2 class="sectionedit3" id="examples_usage">Examples/Usage</h2> <div class="level2"> <p> To prepare a canvas element with given size and id, this plugin uses <code><canvas></code> 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. </p> <p> For example, you can draw two boxes in the canvas of which size is 140×140 pixcels: </p> <pre class="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></pre> <p> Then you will get a drawing in your DW page. The snippet of <abbr title="HyperText Markup Language">HTML</abbr> is: </p> <p> <a href="/lib/exe/fetch.php?tok=1b9e92&media=https%3A%2F%2Fraw.github.com%2Fssahara%2Fdw-plugin-canvas%2Fmaster%2Fsample1.png" class="media" title="https://raw.github.com/ssahara/dw-plugin-canvas/master/sample1.png"><img src="/lib/exe/fetch.php?tok=1b9e92&media=https%3A%2F%2Fraw.github.com%2Fssahara%2Fdw-plugin-canvas%2Fmaster%2Fsample1.png" class="mediaright" loading="lazy" alt="" /></a> </p> <pre class="code html4strict"><span class="sc2"><canvas <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"canvasbox"</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"sample1"</span> <span class="kw3">width</span><span class="sy0">=</span><span class="st0">"140"</span> <span class="kw3">height</span><span class="sy0">=</span><span class="st0">"140"</span>></span>[No canvas support]<span class="sc2"><<span class="sy0">/</span>canvas></span> <span class="sc2"><<a href="http://december.com/html/4/element/script.html"><span class="kw2">script</span></a> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">"text/javascript"</span>></span> /*<span class="sc-2"><![CDATA[*/</span> <span class="sc-2">jQuery( function() { draw1(); });</span> <span class="sc-2">function draw1() {</span> <span class="sc-2"> var canvas1 = jQuery('#sample1')[0];</span> <span class="sc-2"> if ( !canvas1 || !canvas1.getContext ) return false;</span> <span class="sc-2"> var ctx1 = canvas1.getContext('2d');</span> <span class="sc-2"> ctx1.fillStyle = "rgb(200,0,0)";</span> <span class="sc-2"> ctx1.fillRect (10, 10, 80, 80);</span> <span class="sc-2"> ctx1.fillStyle = "rgba(0, 0, 200, 0.5)";</span> <span class="sc-2"> ctx1.fillRect (60, 60, 130, 130);</span> <span class="sc-2">}</span> <span class="sc-2">/*!]]></span>*/ <span class="sc2"><<span class="sy0">/</span><a href="http://december.com/html/4/element/script.html"><span class="kw2">script</span></a>></span></pre> </div> <div class="secedit editbutton_section editbutton_3"><form class="button btn_secedit" method="post" action="/plugin:canvas"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="rev" value="1527707600" /><input type="hidden" name="summary" value="[Examples/Usage] " /><input type="hidden" name="target" value="section" /><input type="hidden" name="hid" value="examples_usage" /><input type="hidden" name="codeblockOffset" value="0" /><input type="hidden" name="range" value="852-2347" /><button type="submit" title="Examples/Usage">Edit</button></div></form></div> <h2 class="sectionedit4" id="syntax">Syntax</h2> <div class="level2"> <p> Basic syntax: </p> <pre class="code"><canvas id [size]> [script] </canvas></pre> <ul> <li class="level1 node"><div class="li"> <strong>id</strong> : “id” of the canvas, which must be unique in the same DW page.</div> <ul> <li class="level2"><div class="li"> This “id” is used in the script to identify canvas or chart target.</div> </li> </ul> </li> </ul> <ul> <li class="level1 node"><div class="li"> <strong>size</strong> : Size of the canvas. (Optional)</div> <ul> <li class="level2"><div class="li"> Default value is <code>300px,150px</code>, which means 300px width and 150px height.</div> </li> <li class="level2"><div class="li"> When one value is given it is assumed to be the height. </div> </li> </ul> </li> </ul> <ul> <li class="level1 node"><div class="li"> <strong>script</strong> : JavaScript to draw something in the canvas. (Optional)</div> <ul> <li class="level2"><div class="li"> script is embedded in the <abbr title="HyperText Markup Language">HTML</abbr> of the page.</div> </li> <li class="level2"><div class="li"> In case of no script inside the tag, no script may embedded.</div> </li> </ul> </li> </ul> <p> Syntax Variants: </p> <p> You may draw more complex charts in the canvas using any javascript chart software, such as <a href="http://www.rgraph.net" class="urlextern" title="http://www.rgraph.net">RGraph</a> and <a href="http://www.jqplot.com" class="urlextern" title="http://www.jqplot.com">jqPlot</a>. These software require different <abbr title="HyperText Markup Language">HTML</abbr> 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. </p> <pre class="code"><canvas:rgraph canvas_id [size]> [script] </canvas></pre> <ul> <li class="level1"><div class="li"> indicate to prepare chart target for <a href="http://www.rgraph.net" class="urlextern" title="http://www.rgraph.net">RGraph</a>. Please see also it's <a href="http://www.rgraph.net/license" class="urlextern" title="http://www.rgraph.net/license">license</a> information.</div> </li> <li class="level1"><div class="li"> <abbr title="HyperText Markup Language">HTML</abbr> output example:<br/> <pre class="code file html4strict"><span class="sc2"><canvas <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"canvasbox"</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"chart1"</span> <span class="kw3">width</span><span class="sy0">=</span><span class="st0">"300px"</span> <span class="kw3">height</span><span class="sy0">=</span><span class="st0">"300px"</span>><<span class="sy0">/</span>canvas></span> <span class="sc2"><<a href="http://december.com/html/4/element/div.html"><span class="kw2">div</span></a> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"rgraph-license-note"</span> <span class="kw3">style</span><span class="sy0">=</span><span class="st0">"width:300px;"</span>></span> <span class="sc2"><<a href="http://december.com/html/4/element/a.html"><span class="kw2">a</span></a> <span class="kw3">href</span><span class="sy0">=</span><span class="st0">"http://www.rgraph.net/"</span>></span>Powered by RGraph<span class="sc2"><<span class="sy0">/</span><a href="http://december.com/html/4/element/a.html"><span class="kw2">a</span></a>></span> <span class="sc2"><<span class="sy0">/</span><a href="http://december.com/html/4/element/div.html"><span class="kw2">div</span></a>></span></pre> </div> </li> </ul> <pre class="code"><canvas:jqplot canvas_id [size]> [script] </canvas></pre> <ul> <li class="level1"><div class="li"> indicate to prepare chart target for <a href="http://www.jqplot.com" class="urlextern" title="http://www.jqplot.com">jqPlot</a>. Please refer also <a href="https://bitbucket.org/cleonello/jqplot/overview" class="urlextern" title="https://bitbucket.org/cleonello/jqplot/overview">jQplot project</a> page.</div> </li> <li class="level1"><div class="li"> <abbr title="HyperText Markup Language">HTML</abbr> output example:<br/> <pre class="code file html4strict"><span class="sc2"><<a href="http://december.com/html/4/element/div.html"><span class="kw2">div</span></a> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"jqplot-target"</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"chart1"</span> <span class="kw3">style</span><span class="sy0">=</span><span class="st0">"width:300px; height:300px;"</span>><<span class="sy0">/</span><a href="http://december.com/html/4/element/div.html"><span class="kw2">div</span></a>></span> <span class="sc2"><<a href="http://december.com/html/4/element/div.html"><span class="kw2">div</span></a> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"jqplot-license-note"</span> <span class="kw3">style</span><span class="sy0">=</span><span class="st0">"width:300px;"</span>></span> <span class="sc2"><<a href="http://december.com/html/4/element/a.html"><span class="kw2">a</span></a> <span class="kw3">href</span><span class="sy0">=</span><span class="st0">"http://www.jqplot.com/"</span>></span>Powered by jQplot<span class="sc2"><<span class="sy0">/</span><a href="http://december.com/html/4/element/a.html"><span class="kw2">a</span></a>></span> <span class="sc2"><<span class="sy0">/</span><a href="http://december.com/html/4/element/div.html"><span class="kw2">div</span></a>></span></pre> </div> </li> </ul> </div> <div class="secedit editbutton_section editbutton_4"><form class="button btn_secedit" method="post" action="/plugin:canvas"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="rev" value="1527707600" /><input type="hidden" name="summary" value="[Syntax] " /><input type="hidden" name="target" value="section" /><input type="hidden" name="hid" value="syntax" /><input type="hidden" name="codeblockOffset" value="2" /><input type="hidden" name="range" value="2348-4440" /><button type="submit" title="Syntax">Edit</button></div></form></div> <h2 class="sectionedit5" id="configuration_and_settings">Configuration and Settings</h2> <div class="level2"> <p> There are no configuration options for this plugin. </p> </div> <div class="secedit editbutton_section editbutton_5"><form class="button btn_secedit" method="post" action="/plugin:canvas"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="rev" value="1527707600" /><input type="hidden" name="summary" value="[Configuration and Settings] " /><input type="hidden" name="target" value="section" /><input type="hidden" name="hid" value="configuration_and_settings" /><input type="hidden" name="codeblockOffset" value="7" /><input type="hidden" name="range" value="4441-4533" /><button type="submit" title="Configuration and Settings">Edit</button></div></form></div> <h2 class="sectionedit6" id="development">Development</h2> <div class="level2"> <p> 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. </p> </div> <h4 id="change_log">Change Log</h4> <div class="level4"> <ul class="rss"><li><div class="li"><a href="https://github.com/ssahara/dw-plugin-canvas/commit/b15bf9886c5b18061bc1f2e14237380a92eb9455" class="urlextern" title="https://github.com/ssahara/dw-plugin-canvas/commit/b15bf9886c5b18061bc1f2e14237380a92eb9455">improve match pattern with word boundary</a> (2016-07-14 02:46)</div></li><li><div class="li"><a href="https://github.com/ssahara/dw-plugin-canvas/commit/ea1115455e73a9f55de618819d3f0eabb4ea9c53" class="urlextern" title="https://github.com/ssahara/dw-plugin-canvas/commit/ea1115455e73a9f55de618819d3f0eabb4ea9c53">inherited handle() and render() args</a> (2014-08-05 16:59)</div></li><li><div class="li"><a href="https://github.com/ssahara/dw-plugin-canvas/commit/1ec27c2782783e0bc3d5218773c57973bf0b558e" class="urlextern" title="https://github.com/ssahara/dw-plugin-canvas/commit/1ec27c2782783e0bc3d5218773c57973bf0b558e">Merge pull request #1 from ssahara/syntax-components</a> (2014-02-13 16:44)</div></li><li><div class="li"><a href="https://github.com/ssahara/dw-plugin-canvas/commit/2c5a95f7c491704383687d3651387a05765a2ca0" class="urlextern" title="https://github.com/ssahara/dw-plugin-canvas/commit/2c5a95f7c491704383687d3651387a05765a2ca0">Release 2014-02-14</a> (2014-02-13 16:41)</div></li><li><div class="li"><a href="https://github.com/ssahara/dw-plugin-canvas/commit/555629aeb2ef47d6408cb232ea0e47ef676147a4" class="urlextern" title="https://github.com/ssahara/dw-plugin-canvas/commit/555629aeb2ef47d6408cb232ea0e47ef676147a4">update readme</a> (2014-02-13 13:41)</div></li></ul> </div> <div class="secedit editbutton_section editbutton_6"><form class="button btn_secedit" method="post" action="/plugin:canvas"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="rev" value="1527707600" /><input type="hidden" name="summary" value="[Development] " /><input type="hidden" name="target" value="section" /><input type="hidden" name="hid" value="development" /><input type="hidden" name="codeblockOffset" value="7" /><input type="hidden" name="range" value="4534-4856" /><button type="submit" title="Development">Edit</button></div></form></div> <h2 class="sectionedit7" id="faq">FAQ</h2> <div class="level2"> <p> <em>[discussions should ideally be deleted and turned into <abbr title="Frequently Asked Questions">FAQ</abbr> entries along the way]</em> </p> <p> Representing data with the help of charts,graphs,symbols is one of the effective way. With the help of such <a href="http://www.koolchart.com" class="urlextern" title="http://www.koolchart.com">data visualization</a> items we are able to make data more interactive. </p> <p> Thanks </p> </div> <div class="secedit editbutton_section editbutton_7"><form class="button btn_secedit" method="post" action="/plugin:canvas"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="rev" value="1527707600" /><input type="hidden" name="summary" value="[FAQ] " /><input type="hidden" name="target" value="section" /><input type="hidden" name="hid" value="faq" /><input type="hidden" name="codeblockOffset" value="7" /><input type="hidden" name="range" value="4857-" /><button type="submit" title="FAQ">Edit</button></div></form></div>  </div> <div class="docInfo"><bdi>plugin/canvas.txt</bdi> · Last modified: <time datetime="2018-05-30T21:13:20+0200">2018-05-30 21:13</time> by <bdi>Klap-in</bdi></div> <hr class="a11y" /> </div></main>  <nav id="dokuwiki__pagetools" aria-labelledby="dokuwiki__pagetools__heading"> <h3 class="a11y" id="dokuwiki__pagetools__heading">Page Tools</h3> <div class="tools"> <ul> <li class="edit"><a href="/plugin:canvas?do=edit" title="Edit this page [e]" rel="nofollow" accesskey="e"><span>Edit this page</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20.71 7.04c.39-.39.39-1.04 0-1.41l-2.34-2.34c-.37-.39-1.02-.39-1.41 0l-1.84 1.83 3.75 3.75M3 17.25V21h3.75L17.81 9.93l-3.75-3.75L3 17.25z"/></svg></a></li><li class="revs"><a href="/plugin:canvas?do=revisions" title="Old revisions [o]" rel="nofollow" accesskey="o"><span>Old revisions</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M11 7v5.11l4.71 2.79.79-1.28-4-2.37V7m0-5C8.97 2 5.91 3.92 4.27 6.77L2 4.5V11h6.5L5.75 8.25C6.96 5.73 9.5 4 12.5 4a7.5 7.5 0 0 1 7.5 7.5 7.5 7.5 0 0 1-7.5 7.5c-3.27 0-6.03-2.09-7.06-5h-2.1c1.1 4.03 4.77 7 9.16 7 5.24 0 9.5-4.25 9.5-9.5A9.5 9.5 0 0 0 12.5 2z"/></svg></a></li><li class="backlink"><a href="/plugin:canvas?do=backlink" title="Backlinks" rel="nofollow"><span>Backlinks</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10.59 13.41c.41.39.41 1.03 0 1.42-.39.39-1.03.39-1.42 0a5.003 5.003 0 0 1 0-7.07l3.54-3.54a5.003 5.003 0 0 1 7.07 0 5.003 5.003 0 0 1 0 7.07l-1.49 1.49c.01-.82-.12-1.64-.4-2.42l.47-.48a2.982 2.982 0 0 0 0-4.24 2.982 2.982 0 0 0-4.24 0l-3.53 3.53a2.982 2.982 0 0 0 0 4.24m2.82-4.24c.39-.39 1.03-.39 1.42 0a5.003 5.003 0 0 1 0 7.07l-3.54 3.54a5.003 5.003 0 0 1-7.07 0 5.003 5.003 0 0 1 0-7.07l1.49-1.49c-.01.82.12 1.64.4 2.43l-.47.47a2.982 2.982 0 0 0 0 4.24 2.982 2.982 0 0 0 4.24 0l3.53-3.53a2.982 2.982 0 0 0 0-4.24.973.973 0 0 1 0-1.42z"/></svg></a></li><li class="top"><a href="#dokuwiki__top" title="Back to top [t]" rel="nofollow" accesskey="t"><span>Back to top</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M13 20h-2V8l-5.5 5.5-1.42-1.42L12 4.16l7.92 7.92-1.42 1.42L13 8v12z"/></svg></a></li> </ul> </div> </nav> </div>  <footer id="dokuwiki__footer"><div class="pad"> <div class="license">Except where otherwise noted, content on this wiki is licensed under the following license: <bdi><a href="https://creativecommons.org/licenses/by-sa/4.0/deed.en" rel="license" class="urlextern">CC Attribution-Share Alike 4.0 International</a></bdi></div> <div class="buttons"> <a href="https://creativecommons.org/licenses/by-sa/4.0/deed.en" rel="license"><img src="/lib/images/license/button/cc-by-sa.png" alt="CC Attribution-Share Alike 4.0 International" /></a> <a href="https://www.dokuwiki.org/donate" title="Donate" ><img src="/lib/tpl/dokuwiki/images/button-donate.gif" width="80" height="15" alt="Donate" /></a> <a href="https://php.net" title="Powered by PHP" ><img src="/lib/tpl/dokuwiki/images/button-php.gif" width="80" height="15" alt="Powered by PHP" /></a> <a href="//validator.w3.org/check/referer" title="Valid HTML5" ><img src="/lib/tpl/dokuwiki/images/button-html5.png" width="80" height="15" alt="Valid HTML5" /></a> <a href="//jigsaw.w3.org/css-validator/check/referer?profile=css3" title="Valid CSS" ><img src="/lib/tpl/dokuwiki/images/button-css.png" width="80" height="15" alt="Valid CSS" /></a> <a href="https://dokuwiki.org/" title="Driven by DokuWiki" ><img src="/lib/tpl/dokuwiki/images/button-dw.png" width="80" height="15" alt="Driven by DokuWiki" /></a> </div> <div style="margin-top: 2em; font-size:90%" class="dokuwiki"><div style="float:right"><a href="http://www.splitbrain.org/personal#imprint" style="float:right; text-decoration: none; color:#333">Imprint</a></div></div> <style type="text/css"> @media screen { body { padding-top: 30px; } #global__header { position: absolute; top: 0; left: 0; text-align: left; vertical-align: middle; line-height: 1.5; background-color: #333; box-shadow: 0 0 8px rgba(0,0,0,0.5); width: 100%; margin: 0; padding: 5px 20px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; white-space: nowrap; overflow: hidden; } #global__header h2 { position: absolute; left: -99999em; top: 0; overflow: hidden; display: inline; } #global__header ul, #global__header li { margin: 0; padding: 0; list-style: none; display: inline; line-height: 1.5; } #global__header a { color: #bbb; text-decoration: none; margin-right: 20px; font-size: 14px; font-weight: normal; } #global__header a:hover, #global__header a:active, #global__header a:focus { color: #fff; text-decoration: underline; } #global__header form { float: right; margin: 0 0 0 20px; } #global__header input { background-color: #333; background-image: none; border: 1px solid #bbb; color: #fff; box-shadow: none; border-radius: 2px; margin: 0; line-height: normal; padding: 1px 0 1px 0; height: auto; } #global__header input.button { border: none; color: #bbb; } #global__header input.button:hover, #global__header input.button:active, #global__header input.button:focus { color: #fff; text-decoration: underline; } } /* /@media */ @media only screen and (min-width: 601px) { /* changes specific for www.dokuwiki.org */ #dokuwiki__header { padding-top: 3em; } #dokuwiki__usertools { top: 3em; } /* changes specific for bugs.dokuwiki.org */ div#container div#showtask { top: 40px; } } /* /@media */ @media only screen and (max-width: 600px) { body { padding-top: 0; } #global__header { position: static; white-space: normal; overflow: auto; } #global__header form { float: none; display: block; margin: 0 0 .4em; } } /* /@media */ @media print { #global__header { display: none; } } /* /@media */ </style> <div id="global__header"> <h2>Global DokuWiki Links</h2> <form method="get" action="https://search.dokuwiki.org/" target="_top"> <input type="text" name="q" title="Search all DokuWiki sites at once" class="input" /> <input type="submit" title="Search all DokuWiki sites at once" value="Search" class="button" /> </form> <ul> <li><a href="https://download.dokuwiki.org" title="Download the latest release" target="_top">Download</a></li> <li><a href="https://www.dokuwiki.org" title="Read the DokuWiki documentation" target="_top">Wiki</a></li> <li><a href="https://forum.dokuwiki.org" title="Ask questions in the DokuWiki forum" target="_top">Forum</a></li> <li><a href="https://irc.dokuwiki.org" title="Check IRC chat logs or join the chat" target="_top">IRC</a></li> <li><a href="https://github.com/splitbrain/dokuwiki/issues" title="Report and track bugs" target="_top">Bugs</a></li> <li><a href="https://translate.dokuwiki.org/" title="Help translating the DokuWiki interface" target="_top">Translate</a></li> <li><a href="https://github.com/splitbrain/dokuwiki" title="Access the most recent git commits" target="_top">Git</a></li> <li><a href="https://xref.dokuwiki.org/reference/dokuwiki/" title="Cross-Reference of the DokuWiki source code" target="_top">XRef</a></li> <li><a href="https://codesearch.dokuwiki.org/" title="Search through the sources of DokuWiki, plugins and templates" target="_top">Code Search</a></li> </ul> </div>  </div></footer> </div></div> <div class="no"><img src="/lib/exe/taskrunner.php?id=plugin%3Acanvas&1732791881" width="2" height="1" alt="" /></div> <div id="screen__mode" class="no"></div></body> </html>