Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
1 contributor

Users who have contributed to this file

50 lines (43 sloc) 1.31 KB
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Simple synchronous blocking JavaScript example</title>
<style>
canvas {
border: 1px solid rgb(0,0,255);
}
</style>
</head>
<body>
<p><button class="fill">Fill canvas</button><button class="alert">Click me for alert</button></p>
<script>
const canvas = document.createElement('canvas');
canvas.width = 640;
canvas.height = 480;
document.body.appendChild(canvas);
let ctx = canvas.getContext('2d');
let alertBtn = document.querySelector('.alert');
let fillBtn = document.querySelector('.fill');
function degToRad(degrees) {
return degrees * Math.PI / 180;
};
function random(min,max) {
var num = Math.floor(Math.random()*(max-min)) + min;
return num;
}
function expensiveOperation() {
for(let i = 0; i < 1000000; i++) {
ctx.fillStyle = 'rgba(0,0,255, 0.2)';
ctx.beginPath();
ctx.arc(random(0, canvas.width), random(0, canvas.height), 10, degToRad(0), degToRad(360), false);
ctx.fill()
}
}
fillBtn.addEventListener('click', expensiveOperation);
alertBtn.addEventListener('click', () =>
alert('You clicked me!')
);
</script>
</body>
</html>
You can’t perform that action at this time.