behizz behizz - 20 days ago 9
HTML Question

Display large matrices in html

I'm trying to display a 600x600 matrix in HTML. I've tried tables, divs, Javascript libraries (scrolling) but all of them are so slow in responding to user actions.

Is there any solution for displaying these kind of matrices?

Answer

If you're just displaying a bunch of boxes, what you need is a canvas.

You can draw boxes on it however you'd like. It's efficient, as there's only one DOM element.

From https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API:

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.fillStyle = "green";
ctx.fillRect(10, 10, 100, 100);