Skip to content

Instantly share code, notes, and snippets.

@YtvwlD

YtvwlD/index.html

Last active October 20, 2017 20:16
Show Gist options
  • Save YtvwlD/c24c5e5871c6a2f72f24d29e32f6b956 to your computer and use it in GitHub Desktop.
Save YtvwlD/c24c5e5871c6a2f72f24d29e32f6b956 to your computer and use it in GitHub Desktop.
Download ZIP
display pixels in a canvas
Raw
index.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Pixelflut</title>
<link rel="stylesheet" href="style.css" />
<script src="pixelflut.js"></script>
</head>
<body>
<canvas>
Your browser doesn't seem to support canvas elements.
</canvas>
</body>
</html>
Raw
pixelflut.js
"use strict";
var canvas;
var canvas_context;
var image_data;
function init() {
canvas = document.getElementsByTagName("canvas")[0];
// fixed - for reasons
canvas.height = 1000;
canvas.width = 1000;
if(!canvas.getContext) {
alert("Your browser doesn't seem to support canvas.getContext.");
}
canvas_context = canvas.getContext('2d');
image_data = canvas_context.createImageData(1,1);
canvas_context.translate(0.5, 0.5); // Why - oh why?!
}
function draw(x, y, r, g, b) {
canvas_context.fillStyle = `rgb(${r}, ${g}, ${b})`;
for(var i = 0; i < 100; i++) { // more intense colors
canvas_context.fillRect(x, y, 1, 1);
}
}
window.onload = init;
Raw
style.css
/* consume the whole viewport */
html {
width: 99%;
height: 98%;
}
body {
width: 100%;
height: 100%;
}
canvas {
width: 100%;
height: 100%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment