Canvas Night Sky

Developer
Tamuna
Size
1,956 Kb
Views
12,144
  1. Canvas Night Sky Previews
  2. Canvas Night Sky HTML Codes
  3. Canvas Night Sky CSS Codes
  4. Canvas Night Sky JS Codes

How do I make an canvas night sky?

A random night sky. What is a canvas night sky? How do you make a canvas night sky? This script and codes were developed by Tamuna on 03 January 2023, Tuesday.

Canvas Night Sky Previews
IQ Test

Canvas Night Sky - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Canvas Night Sky</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <canvas id="sky"></canvas> <script src="js/index.js"></script>
</body>
</html>

Canvas Night Sky - Script Codes CSS Codes

html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden;
}
#sky { background: -webkit-linear-gradient(#00111e 30%, #033d5e); background: -moz-linear-gradient(#00111e 30%, #033d5e); background: -o-linear-gradient(#00111e 30%, #033d5e); background: linear-gradient(#00111e 30%, #033d5e); overflow: hidden;
}

Canvas Night Sky - Script Codes JS Codes

function drawing() {	var c = document.getElementById('sky');	var ctx = c.getContext('2d');	var xMax = c.width = window.screen.availWidth;	var yMax = c.height = window.screen.availHeight;	var hmTimes = Math.round(xMax + yMax);	for(var i=0; i<=hmTimes; i++) { var randomX = Math.floor((Math.random()*xMax)+1); var randomY = Math.floor((Math.random()*yMax)+1); var randomSize = Math.floor((Math.random()*2)+1); var randomOpacityOne = Math.floor((Math.random()*9)+1); var randomOpacityTwo = Math.floor((Math.random()*9)+1); var randomHue = Math.floor((Math.random()*360)+1); if(randomSize>1) { ctx.shadowBlur = Math.floor((Math.random()*15)+5); ctx.shadowColor = "white"; } ctx.fillStyle = "hsla("+randomHue+", 30%, 80%, ."+randomOpacityOne+randomOpacityTwo+")"; ctx.fillRect(randomX, randomY, randomSize, randomSize);	}
}
drawing();
Canvas Night Sky - Script Codes
Canvas Night Sky - Script Codes
Home Page Home
Developer Tamuna
Username AlienPiglet
Uploaded January 03, 2023
Rating 4.5
Size 1,956 Kb
Views 12,144
Do you need developer help for Canvas Night Sky?

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!

Tamuna (AlienPiglet) Script Codes
Name
Lime Form
Monochrome Form
Spin Around the Cursor
Starry Night of Markup
Pink and Blue
Simple Counter
Anbani Flashcards
CSS Clock
Creamy Form
Rotating Menu
Create amazing marketing copy 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!