Canvas Geometry

Developer
John Urbank
Size
2,242 Kb
Views
48,576
  1. Canvas Geometry Previews
  2. Canvas Geometry HTML Codes
  3. Canvas Geometry CSS Codes
  4. Canvas Geometry JS Codes

How do I make an canvas geometry?

What is a canvas geometry? How do you make a canvas geometry? This script and codes were developed by John Urbank on 08 July 2022, Friday.

Canvas Geometry Previews
IQ Test

Canvas Geometry - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Canvas Geometry</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body { width: 100%; height: 100%; background: rgb(23, 200, 129);
}
canvas { background: rgb(23, 200, 129);
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Canvas Geometry - Script Codes CSS Codes

body { width: 100%; height: 100%; background: rgb(23, 200, 129);
}
canvas { background: rgb(23, 200, 129);
}

Canvas Geometry - Script Codes JS Codes

var body, canvas, ctx;
var pageW = window.innerWidth;
var pageH = window.innerHeight;
var TWO_PI = Math.PI * 2;
var init = function() { body = document.getElementsByTagName( 'body' ); canvas = document.createElement( 'canvas' ); body[0].appendChild( canvas ); canvas = document.getElementsByTagName( 'canvas' )[0]; ctx = canvas.getContext( "2d" ); canvas.width = pageW; canvas.height = pageH; window.onresize = function() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; draw(); }; draw();
}
var draw = function() { var x = canvas.width / 2, y = canvas.height / 2; var size = 210; for (var i=0; i<11; i++) { ctx.globalCompositeOperation = "xor"; ctx.beginPath(); ctx.arc(x, (y-size) + i*20, i*20, TWO_PI, false); ctx.lineWidth = 40; ctx.strokeStyle = 'rgba(0, 0, 0, '+ i/15 +')'; ctx.stroke(); ctx.closePath(); ctx.beginPath(); ctx.arc(x, (y+size) + i* -20, i*20, TWO_PI, false); ctx.lineWidth = 2; ctx.strokeStyle = 'rgba(0, 0, 0, '+ i/5 +')'; ctx.stroke(); ctx.closePath(); }
};
init();
Canvas Geometry - Script Codes
Canvas Geometry - Script Codes
Home Page Home
Developer John Urbank
Username jurbank
Uploaded July 08, 2022
Rating 3
Size 2,242 Kb
Views 48,576
Do you need developer help for Canvas Geometry?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

John Urbank (jurbank) Script Codes
Name
Tape Cassette Icon - CSS Only
Lego style loading text
Gutterless Feature Grid
A Pen by John Urbank
CubeTronic
Navicon - responsive nav pattern
Simple jQuery Slider
Time is Money
CSS Loading Animation
Simple, CSS only, responsive menu
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!