This repository was archived by the owner on Jul 24, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathcanvas.html
More file actions
41 lines (41 loc) · 4.52 KB
/
canvas.html
File metadata and controls
41 lines (41 loc) · 4.52 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
39
40
41
<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta http-equiv="X-UA-Compatible" content="ie=edge"><meta name="description" content="The Canvas API provides a means for drawing graphics via JavaScript and the HTML canvas element."><!-- Bing --><meta name="msvalidate.01" content="45CBBE1BD8265A2217DFDA630EB8F84A" /><title>Tiny Brain Fans - Canvas</title><link rel="stylesheet" href="tinystyle.css"></head><body>
<main id="main"><article id="content"><h1 id="title">Canvas</h1><p>The Canvas API provides a means for drawing graphics via <a href="javascript.html">JavaScript</a> and the <a href="html.html">HTML</a> <code><canvas></code> element.</p>
<h2>Initialization</h2>
<p>To start using the canvas, put the canvas element in your webpage HTML, along with a width or height in pixels. Fallback content goes in between the opening and closing tag.</p>
<pre><code class="language-html"><canvas id="canvas-name" width="150" height="150"></canvas>
</code></pre>
<p>The canvas is initially blank and then needs to be accessed, with the new context assigned to a variable. This variable will become the way to draw on the canvas.</p>
<pre><code class="language-javascript">var canvas = document.getElementById('canvas-name');
var ctx = canvas.getContext('2d');
</code></pre>
<h2>Drawing</h2>
<p>Canvas only supports rectangles and paths.</p>
<h3>Rectangles</h3>
<pre><code class="language-javascript">ctx.fillRect(x, y, width, height) // Draws a filled rectangle.
ctx.strokeRect(x, y, width, height) // Draws a rectangular outline.
ctx.clearRect(x, y, width, height) // Clears the specified rectangular area, making it fully transparent.
</code></pre>
<h3>Paths</h3>
<p><a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D#paths" target="_blank">From MDN</a>:</p>
<p>A path is a list of points, connected by segments of lines that can be of different shapes, curved or not, of different width and of different color. A path, or even a subpath, can be closed. To make shapes using paths, we take some extra steps:</p>
<ol>
<li>First, you create the path with <code>beginPath()</code></li>
<li>Then you use drawing commands to draw into the path</li>
<li>Once the path has been created, you can stroke or fill the path to render it with <code>closePath()</code></li>
</ol>
<pre><code class="language-javascript">ctx.beginPath() // Creates a new path. Once created, future drawing commands are directed into the path and used to build the path up.
ctx.closePath() // Adds a straight line to the path, going to the start of the current sub-path.
ctx.stroke() // Draws the shape by stroking its outline.
ctx.fill() // Draws a solid shape by filling the path's content area.
</code></pre>
<h4>Path Methods</h4>
<p><code>moveTo(x,y)</code> <strong>moves the pen without recording it as a path</strong> to be drawn or filled.</p>
<p><code>lineTo(x,y)</code> should be used to draw <strong>straight lines</strong>.</p>
<p><code>arc(x, y, radius, startAngle, anticlockwise)</code> will draw an <strong>arc centered at x, y</strong>.</p>
<p><code>arcTo()</code> is often used to make rounded corners <a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/arcTo" target="_blank">https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/arcTo</a></p>
<p><code>quadraticCurveTo(cp1x, cp1y, x, y)</code> and <code>bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)</code> are also good for [rounded shapes](<a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D#paths" target="_blank">https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D#paths</a>. </p>
<h2>References</h2>
<ul>
<li><a href="https://webglfundamentals.org/webgl/lessons/webgl-anti-patterns.html" target="_blank">https://webglfundamentals.org/webgl/lessons/webgl-anti-patterns.html</a></li>
</ul>
<p class="last-modified">Last modified: 202206101419</p></article></main><footer><nav><a href="index.html">Sitemap</a></nav><div class="social"><p>Built using <a href="http://codeberg.org/milofultz/swiki" target="_blank" rel="noopener noreferrer">{{SWIKI}}</a></p><p><a href="http://codeberg.org/milofultz/" target="_blank" rel="noopener noreferrer">Codeberg</a></p><p><a href="http://milofultz.com/" target="_blank" rel="noopener noreferrer">milofultz.com</a></p><p><a href="https://merveilles.town/@milofultz" target="_blank" rel="me noopener noreferrer">Mastodon</a></p></div></footer></body></html>