eendeego / node-openvg-canvas

Canvas implementation on top of node-openvg
179 stars 25 forks source link

putImageData results in odd transparent grid on right side of 1920x1080 screen #10

Open pixelami opened 11 years ago

pixelami commented 11 years ago

Hi I think I found an issue with putImageData, certainly I have only seen this just now when placing an image that was the full width of the screen.

Code to reproduce.

#!/usr/bin/env node-canvas
/*jslint indent: 2, node: true */
/*global Image: true */
"use strict";

var Canvas = require('../lib/canvas');
var Image = Canvas.Image;
var canvas = new Canvas(1920, 1080);
var ctx = canvas.getContext('2d');
var fs = require('fs');

var eu = require('./util');

var grid = fs.readFileSync(__dirname + '/imgs/january-11-space_unicorn-nocal-1920x1080.jpg');
var img = new Image();
img.src = grid;

ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.imageSmoothingEnabled = false;

ctx.drawImage(img); // Default to image width, height

var imgdata = ctx.getImageData(0,580,1920,500);
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.putImageData(imgdata, 0, 580);

canvas.vgSwapBuffers();

eu.saveScreenshot(ctx, 0, 0, 1920, 1080,
    'examples/screenshots/putImageData.png');

eu.waitForInput();

I have reproduced with a composited image grabbed from the context via getImageData, and also with a simple 1920x1080 jpg (as in the test above).

Screenshot putImageData

pixelami commented 11 years ago

More Info, The problem seems to happen after ImageData width > 1919.

i.e. This is fine when used with put data. var imgdata = ctx.getImageData(0, 0, 1919, h);

this breaks. var imgdata = ctx.getImageData(0, 0, 1920, h);