forked from roblarsen/CeeJS
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
38 lines (32 loc) · 5.18 KB
/
index.html
File metadata and controls
38 lines (32 loc) · 5.18 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js ie6" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie7" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>CanvasJS: Sandbox</title>
<meta name="description" content="Sample playground file for CanvasJS">
</head>
<body>
<h1>Canvas JS</h1>
<p>There is an 800x600 canvas here. You can play with CanvasJS in browser console.</p>
<pre><code>ctx = new Canvas('ctx'); // creates a new Canvas object in the canvas with id="ctx"
//Now you have all the features of CanvasJS available to you.
ctx.circle({x:25, y:25, radius: 10, fillStyle:'rgb(200,0,0)'}) //draw a circle
.rectangle({x:50, y:75, height: 100, width: 50, fillStyle: 'rgba(0, 0, 200, 0.5)'}) //draw a rectangle
.currentPos(); // returns the current x and y coordinates of the 'cursor' // get the current position
</code></pre>
<canvas id="ctx" width="800" height="600" style="background:url(grids.jpg) no-repeat"></canvas>
<!-- Specific to this page -->
<script src="Canvas.js"></script>
<h2>"Documentation"</h2>
<p>This will improve over time, and when it does, I'll remove the quotes. </p>
<p>For now, in the spirit of keeping moving on this project, here's a list of all the methods and properties available in a new Canvas object. All of the common properties (fillStyle, etc) are actually mapped to getter/setter methods. Anything that doesn't return a value is chainable.</p>
<p>An <a href="docs/CanvasJS.html">API reference</a> has sprouted.</p>
<ul>
<ul><li><a href="docs/global.html#arc">arc</a></li><li><a href="docs/global.html#arcTo">arcTo</a></li><li><a href="docs/global.html#beginPath">beginPath</a></li><li><a href="docs/global.html#bezierCurveTo">bezierCurveTo</a></li><li><a href="docs/global.html#boundingBox">boundingBox</a></li><li><a href="docs/global.html#circle">circle</a></li><li><a href="docs/global.html#clearRect">clearRect</a></li><li><a href="docs/global.html#clip">clip</a></li><li><a href="docs/global.html#closePath">closePath</a></li><li><a href="docs/global.html#createImageData">createImageData</a></li><li><a href="docs/global.html#createLinearGradient">createLinearGradient</a></li><li><a href="docs/global.html#createPattern">createPattern</a></li><li><a href="docs/global.html#createRadialGradient">createRadialGradient</a></li><li><a href="docs/global.html#currentPos">currentPos</a></li><li><a href="docs/global.html#drawImage">drawImage</a></li><li><a href="docs/global.html#fill">fill</a></li><li><a href="docs/global.html#fillCircle">fillCircle</a></li><li><a href="docs/global.html#fillStyle">fillStyle</a></li><li><a href="docs/global.html#fillText">fillText</a></li><li><a href="docs/global.html#font">font</a></li><li><a href="docs/global.html#getImageData">getImageData</a></li><li><a href="docs/global.html#globalAlpha">globalAlpha</a></li><li><a href="docs/global.html#globalCompositeOperation">globalCompositeOperation</a></li><li><a href="docs/global.html#isPointInPath">isPointInPath</a></li><li><a href="docs/global.html#line">line</a></li><li><a href="docs/global.html#lineCap">lineCap</a></li><li><a href="docs/global.html#lineJoin">lineJoin</a></li><li><a href="docs/global.html#lineTo">lineTo</a></li><li><a href="docs/global.html#lineWidth">lineWidth</a></li><li><a href="docs/global.html#math">math</a></li><li><a href="docs/global.html#measureText">measureText</a></li><li><a href="docs/global.html#miterLimit">miterLimit</a></li><li><a href="docs/global.html#moveTo">moveTo</a></li><li><a href="docs/global.html#putImageData">putImageData</a></li><li><a href="docs/global.html#quadraticCurveTo">quadraticCurveTo</a></li><li><a href="docs/global.html#quadraticCurveTo">quadraticCurveTo</a></li><li><a href="docs/global.html#rect">rect</a></li><li><a href="docs/global.html#rectangle">rectangle</a></li><li><a href="docs/global.html#reset">reset</a></li><li><a href="docs/global.html#restore">restore</a></li><li><a href="docs/global.html#rotate">rotate</a></li><li><a href="docs/global.html#roundedRectangle">roundedRectangle</a></li><li><a href="docs/global.html#save">save</a></li><li><a href="docs/global.html#scale">scale</a></li><li><a href="docs/global.html#setTransform">setTransform</a></li><li><a href="docs/global.html#shadowBlur">shadowBlur</a></li><li><a href="docs/global.html#shadowColor">shadowColor</a></li><li><a href="docs/global.html#shadowOffset">shadowOffset</a></li><li><a href="docs/global.html#shadowOffsetX">shadowOffsetX</a></li><li><a href="docs/global.html#shadowOffsetY">shadowOffsetY</a></li><li><a href="docs/global.html#stroke">stroke</a></li><li><a href="docs/global.html#strokeCircle">strokeCircle</a></li><li><a href="docs/global.html#strokeRect">strokeRect</a></li><li><a href="docs/global.html#strokeStyle">strokeStyle</a></li><li><a href="docs/global.html#strokeText">strokeText</a></li><li><a href="docs/global.html#textAlign">textAlign</a></li><li><a href="docs/global.html#textBaseline">textBaseline</a></li><li><a href="docs/global.html#transform">transform</a></li><li><a href="docs/global.html#translate">translate</a></li></ul>
</ul>
</body>
</html>