3 ms·
var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ctx.fillStyle = `rgb(${r}, ${g}, ${b})`; ctx.fillRect(x, y,
by egeozcan 9y ago
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = `rgb(${r}, ${g}, ${b})`;
ctx.fillRect(x, y, 1, 1);
I say it's pretty close.
- qualitytime 9y agoLOL, not even close.
- sp332 9y agoYou can save this as an HTML file: <canvas id="canvas" width="400" height="400"></canvas> <script> var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var width = canvas.width; var height = canvas.height; var imagedata = ctx.createImageData(width, height); function draw(r, g, b, x, y){ var pixelindex = (y * width + x) * 4; imagedata.data[pixelindex] = r; imagedata.data[pixelindex+1] = g; imagedata.data[pixelindex+2] = b; imagedata.data[pixelindex+3] = 255; //alpha ctx.putImageData(imagedata, 0, 0); } </script> This gives you a 400x400 space to draw on. Open the console and call draw(). draw(0,0,0,15,15);
- codeflo 9y agoIt's pretty amazing to me that in 2018, the way we pass colors to a modern graphics API is to build a string with comma separated list of the individual components encoded in decimal. And then people wonder why computers feel slower than they did 15 years ago.
- egeozcan 9y agoLegacy APIs for DOM are hard to get rid of, which the Canvas API is based on. There is some progress though: https://developers.google.com/web/updates/2018/03/cssom https://developers.google.com/web/updates/2018/03/cssom