Simple HTML Canvas with Arrow Key Controls

Developer
Andy Hoffman
Size
2,144 Kb
Views
32,384
  1. Simple HTML Canvas with Arrow Key Controls Previews
  2. Simple HTML Canvas with Arrow Key Controls HTML Codes
  3. Simple HTML Canvas with Arrow Key Controls CSS Codes
  4. Simple HTML Canvas with Arrow Key Controls JS Codes

How do I make an simple html canvas with arrow key controls?

What is a simple html canvas with arrow key controls? How do you make a simple html canvas with arrow key controls? This script and codes were developed by Andy Hoffman on 24 August 2022, Wednesday.

Simple HTML Canvas with Arrow Key Controls Previews
IQ Test

Simple HTML Canvas with Arrow Key Controls - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simple HTML Canvas with Arrow Key Controls</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <canvas id="canvas"></canvas> <script src="js/index.js"></script>
</body>
</html>

Simple HTML Canvas with Arrow Key Controls - Script Codes CSS Codes

canvas { border: 1px solid black; position: absolute; top: 50%; left: 50%; width: 300px; height: 200px; transform: translateY(-50%) translateX(-50%);
}

Simple HTML Canvas with Arrow Key Controls - Script Codes JS Codes

var canvas;
var ctx;
var dx = 5;
var dy = 5;
var x = 150;
var y = 100;
var WIDTH = 300;
var HEIGHT = 200;
var SMALL_RECT_WIDTH = 50;
var SMALL_RECT_HEIGHT = 20;
function init() { canvas = document.getElementById('canvas'); ctx = canvas.getContext('2d'); draw();
}
function rect(x,y,w,h) { ctx.beginPath(); ctx.rect(x,y,w,h); ctx.closePath(); ctx.fill(); ctx.stroke();
}
function clear() { ctx.clearRect(0, 0, WIDTH, HEIGHT);
}
function keydownHandler(evt) { switch (evt.keyCode) { case 82: // 'r' ctx.style.transform = 'rotate(360deg)'; break; case 38: /* Up arrow was pressed */ y -= dy; break; case 40: /* Down arrow was pressed */ y += dy; break; case 37: /* Left arrow was pressed */ x -= dx; break; case 39: /* Right arrow was pressed */ x += dx; break; }
}
function draw() { clear(); ctx.strokeStyle = 'black'; ctx.fillStyle = 'purple'; rect(x-(SMALL_RECT_WIDTH *.5), y-(SMALL_RECT_HEIGHT + 15), SMALL_RECT_WIDTH, SMALL_RECT_HEIGHT); requestAnimationFrame(draw);
}
init();
window.addEventListener('keydown', keydownHandler, true); // Cross-browser support for requestAnimationFrame
window.requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || window.mozRequestAnimationFrame;
Simple HTML Canvas with Arrow Key Controls - Script Codes
Simple HTML Canvas with Arrow Key Controls - Script Codes
Home Page Home
Developer Andy Hoffman
Username antibland
Uploaded August 24, 2022
Rating 3
Size 2,144 Kb
Views 32,384
Do you need developer help for Simple HTML Canvas with Arrow Key Controls?

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!

Andy Hoffman (antibland) Script Codes
Name
Here today
Full page image fade in
Trusted Clicks
Pure CSS Flexbox Navigation
Animated Stacked Pages
SVG With Pure CSS Tooltip
Working with jQuery Marquee plugin
Flexbox 3-Column Layout
Flexbox Wrapping
Accessible Tooltip
Create amazing love letters 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!