РЕДАКТИРОВАТЬ: Ниже оригинальный пост, но я выяснил проблему. Похоже, проблема заключалась в использовании десятичного числа в качестве координаты Y (destY). Я разобрал это по округлению:
var rand = {
destX: Math.round(Math.random()*main.canvas.width),
destY: Math.random()*main.canvas.height
}
Я включил изображения, чтобы показать разницу между Firefox и Chrome. Как вы можете видеть, изображения, которые я наложил на холст, перекошены. Кто-нибудь испытывал это раньше? Это проблема с контекстным блендером или Webkits canvas вообще?
var main;
$(document).ready(function(){
var canvas = document.getElementById('canvas');
main = canvas.getContext('2d');
main.canvas.width = $(window).width();
main.canvas.height = $(window).height()/2;
});
$(window).load(function(){
var array = new Array();
$('img').each(function(){
var temp = document.createElement('canvas');
var ctx = temp.getContext('2d');
ctx.canvas.width = this.width;
ctx.canvas.height = this.height;
ctx.drawImage(this,0,0);
var rand = {
destX: Math.random()*main.canvas.width,
destY: Math.random()*main.canvas.height
}
ctx.blendOnto(main,'multiply',rand);
});
});