Tell me how to increase the size of the points, I just can not figure it out.

var container, particle, canvas, ctx, a, b, n, w, h, p; particle = { x: 10, y: 0 }; function init() { container = document.getElementById('containers'); canvas = document.createElement('canvas'); ctx = canvas.getContext('2d'); w = 50; h = 50; container.style.marginLeft = Math.round(w * -0.5) + 'px'; container.style.marginTop = Math.round(h * -0.5) + 'px'; p = Object.create(particle); px = p.ox = 25; py = p.oy = 25; container.appendChild(canvas); } function step() { b = (a = ctx.createImageData(w, h)).data; b[n = (~~px + ~~py * w) * 4] = b[n + 1] = b[n + 2] = 255, b[n + 3] = 255; ctx.putImageData(a, 0, 0); requestAnimationFrame(step); } init(); step(); 
 html, body { background: #000; } #containers { position: absolute; left: 50%; top: 50%; } 
 <div id="containers"></div>

  • 2
    you need to look at the line: b[n = (~~px + ~~py * w) * 4] = b[n + 1] = b[n + 2] = COLOR, b[n + 3] = 255; - it sets the color for a specific point, if you need to decorate more than one point - you need to set the color for several points - Grundy
  • Questions asking for help with debugging (“why does this code not work?”) Should include the desired behavior, a specific problem or error, and a minimum code for playing it right in the question. - Kromster
  • one
    @Kromster, so the code is given, the expected behavior is described - Grundy
  • @Kromster, quite small: from the fact that you can remove only the hanging of the mousemove event, but the Stats check, everything else is stupid drawing of points, and it is for this that is the question. - Grundy
  • @Grundy the above code is redundant and 80% not relevant to the subject of the question "How to make dots in 4px". - Kromster 5:02 pm

0