Как на canvas-е нарисовать обычную сетку?
Вообщем суть в том, что шарик должен отрисовываться на сетке. Но каждый раз перерисовывать сетку затратно.
Можно ли один раз нарисовать фон в виде сетки и наложить на него канвас,где будет шарик и перерисовывать его?
Или что-то подобное...
Спасибо
<body width="100%" height="100%">
<img id="cimg" />
<div id="cdiv" style="width:100%;height:100%"/>
<script >
var scale = window.devicePixelRatio;
var width = window.innerWidth/scale;
var height = window.innerHeight/scale;
var cnv = document.createElement("canvas");
cnv.width = width;
cnv.height = height;
var ctx = cnv.getContext("2d");
ctx.strokeStyle = "grey";
var w = cnv.width - 1;
var h = cnv.height - 1;
var span = 45;
for (var x = -0.5; x < w; x += span) ctx.strokeRect(x, 0, 0.1, h);
for (var y = -0.5; y < h; y += span) ctx.strokeRect(0, y, w, 0.1);
// сохрнить в рисунок
document.images["cimg"].src = cnv.toDataURL();
//$("#cimg").attr("src", cnv.toDataURL());
// добавить как фон для div
document.getElementById("cdiv").style="background-image: url('" + cnv.toDataURL() + "')";
document.onmousemove = function(e) {
e.stopPropagation();
cnv.width = cnv.width;
x = e.clientX;
y = e.clientY;
ctx.arc(x,y,10,0,Math.PI*2,true);
ctx.strokeStyle = "#111";
ctx.stroke();
};