HTML Canvas
Posted in
452
11:36 pm, May 23, 2023
Instant colour fill with HTML Canvas
Nice site with coloring images art and no ad's. Nice to just draw and color.
Demo is at https://shaneosullivan.github.io/example-canvas-fill/ , code is at https://github.com/shaneosullivan/example-canvas-fill .
Instant colour fill with HTML Canvas Demo
View Demo Full Screen View Demo New Tab
Instant colour fill with HTML Canvas Code
HTML
<html lang="en">
<head>
<title>Instant Canvas Fill Example</title>
<link rel="stylesheet" href="index.css"></link>
</head>
<body>
<p>
This is an example of how to fill an area of an image, displayed in a HTML
Canvas, instantly.
</p>
<p>
The code for this is available on
<a href="https://github.com/shaneosullivan/example-canvas-fill" target="_blank">Github</a>,
or just view the page source. You can also read a description of how it
works <a href="https://shaneosullivan.wordpress.com/2023/05/23/instant-colour-fill-with-html-canvas">
my blog post
</a> about it.
</p>
<div>
<form id="speedForm" action="">
<label><input type="radio" name="fillspeed" value="instant"></input> Fill Instantly</label>
<label><input type="radio" name="fillspeed" value="slow" checked></input> Fill Slowly</label>
</form>
<form id="colourForm">
<label style="background-color: #00FF00; color: #000000;"><input type="radio" name="colour" value="#00FF00"></input> Green</label>
<label style="background-color: #FF0000;"><input type="radio" name="colour" value="#FF0000" checked></input> Red</label>
<label style="background-color: #0000FF;"><input type="radio" name="colour" value="#0000FF"></input> Blue</label>
</form>
</div>
<canvas
id="canvas"
style="height: 750px; width: 1000px; border: 1px solid #666666"
height="750"
width="1000"
></canvas>
<!-- Tip o' the hat to https://tholman.com/github-corners -->
<a
href="https://github.com/shaneosullivan/example-canvas-fill"
class="github-corner"
aria-label="View source on GitHub"
target="_blank"
>
<svg
width="40"
height="40"
viewBox="0 0 250 250"
style="
fill: #151513;
color: #fff;
position: absolute;
top: 0;
border: 0;
right: 0;
"
aria-hidden="true"
>
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
<path
d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
fill="currentColor"
style="transform-origin: 130px 106px"
class="octo-arm"
></path>
<path
d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
fill="currentColor"
class="octo-body"
></path>
</svg>
</a>
<script type="text/javascript" src="browser.js"></script>
</body>
</html>Add Comment
Other Items in HTML Canvas
Related Search Terms
Other Categories in Code
404 pages animation animations background effects boxes buttons css css & javascript css animation css animations css backgrounds css cursors css framework css frameworks css modal css positions css reset css shadows css slider css text effects css text formatting css tips css tools css z-index content slider cookie alerts design html css sections html canvas html sections icons image zoom interactive images lightbox link effects loading animation modals mouse effects navigation notifications parallax profiles quick css seo sections text ui web developer checklists animations backgrounds bootstrap buttons css css animated css animations css framework css grid footers forms html image effects images javascript scroll effects sections show your work svg text animation timeline
css animations
HTML Canvas
javascript
Random Quote
