Pixel ist 4 Zeilen hoch

Question

Pixel werden mit falschen Farben und 4 Zeilen hoch gezogen.

like this

var cnv = document.getElementById("john"); 
var ctx = cnv.getContext("2d"); 
var width = cnv.width; 
var height = cnv.height; 

//ctx.imageSmoothingEnabled = false; 
var imd = ctx.createImageData(width,height); 

i = 0; 

imd.data[i] = 255; 
imd.data[i+1] = 0; 
imd.data[i+2] = 0; 
imd.data[i+3] = 255; 

ctx.putImageData(imd,1,1); 

https://jsfiddle.net/zzxsvsxy/2/

Answer 1

Problem wurde durch Einstellen einer Höhe von Leinwand mit CSS verursacht:

canvas { width: 300px; height: 300px; } 

Set Leinwandgröße nur mit Inline-Regeln:

<canvas width="300" height="300"></canvas>