Figure out source of partially filled pixels

[ianhi]

If you zoom in on an area that you filled in from a lower zoom level then the edge pixels have clearly been interpolated:

This is happening either on the scaling up of the image to match the classCanvas size - or on the downsizing of the class canvas to the zoomed image. I think it may be the latter because if I draw while zoomed in it's crisp:

not sure though. Probably ought to look at what the actual arrays look like.

[ianhi]

Probably happening due to the scaling here:

ipysegment/src/widget.ts

Lines 145 to 160 in 6d18932

	this.displayContext.fill(this.path);
	this.previewContext.save();
	this.previewContext.fillStyle = 'rgb(255, 10, 100)';
	this.previewContext.fill(this.path);
	this.model.classContext.drawImage(
	this.previewCanvas,
	0,
	0,
	this.previewCanvas.width,
	this.previewCanvas.height,
	this._Sx,
	this._Sy,
	this._sWidth,
	this._sHeight
	);
	this.previewContext.restore();

[ianhi]

maybe these will be important:
https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering
https://stackoverflow.com/questions/7615009/disable-interpolation-when-scaling-a-canvas
though annoyingly chome and firefox both don't fully implement the spec and instead implement different keywords:
https://caniuse.com/#feat=css-crisp-edges

only pixelated for chrome and only crisp-edges for firefox

[ianhi]

there may be a compositing mode that is helpful here https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation

[ianhi]

search for "crisp" on this page https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors

maybe need to check that the points on the path all align with pixels?