Как смешать холст на фоне CSS?

Question

У меня есть эта программа, которая позволяет пользователю рисовать. Я хочу, чтобы холст, на котором вы рисуете, накладывался поверх фона.

Это работает в firefox, но не в хроме.

http://codepen.io/anon/pen/RRBywo

Это CSS, который я пытался использовать, чтобы заставить его работать:

body { 

    background-image: url('http://previews.123rf.com/images/pyzata/pyzata1307/pyzata130700105/20855013-black-and-white-brick-abstract-texture-background-Stock-Photo.jpg'); 

    mix-blend-mode: normal; 

} 


canvas { 

    mix-blend-mode: overlay; 

} 

Вот код P5JS для моего холста:

function setup() { 

    c = createCanvas(window.innerWidth, window.innerHeight); 

    c.position(0, 0); 

} 

var oldX = 0; 

var oldY = 0; 


function draw() { 


    if (mouseIsPressed) { 

    strokeWeight(10); 

    stroke(random(0,255),random(0,255),random(0,255)); 

    if (mouseX == oldX && mouseY == oldY) { 

     point(mouseX, mouseY); 

    } else {graffitiLine(mouseX, mouseY, oldX, oldY); 

    } 

    } 

    oldX = mouseX; 

    oldY = mouseY; 

} 

function graffitiLine(x0, y0, x1, y1) { 

    line(x0, y0, x1, y1); 

} 

function disBetween(x0,y0,x1,y1){ 

    return sqrt(((x0-x1)*(x0-x1))+((y0-y1)*(y0-y1))); 

} 

и да, я знай, что изображение уродливое и водяное знаком. Я изменю его позже.

Answer 1

Я не знаю p5 слишком много, но то, что вы хотите, это достижимо без CSS вообще:

• Во-первых, заменить p5 холст с ванильным один.
• В вашей ничьей, действуйте как обычно на вашем холсте p5 (теперь вне экрана), затем нарисуйте фоновое изображение, измените видимый холст globalCompositeOperation на 'multiply', заполните красный прямоугольник и, наконец, нарисуйте свой холст p5 на видимой один, все еще с gCO установлен на 'overlay'.

И вуаля!

(Здесь я преобразовал свой эскиз к "экземплярному режиму" один, но он не может быть необходимым ...)

var c, // your p5 canvas 
 
    main, ctx, // the main canvas where we'll draw everything 
 
    img; // the background-image 
 

 
// we need to start the sketch in "instance mode" so we can have the background-image loaded 
 
var s = function(p) { 
 
    p.setup = function setup() { 
 
    c = p.createCanvas(window.innerWidth, window.innerHeight); 
 
    c.position(0, 0); 
 
    main = c.elt.cloneNode(true); 
 
    document.body.replaceChild(main, c.elt); // replace the p5 canvas with our own 
 
    ctx = main.getContext('2d'); 
 
    } 
 

 
    p.draw = function draw() { 
 

 
    if (p.mouseIsPressed) { 
 
     p.strokeWeight(10); 
 
     p.stroke(p.random(0, 255), p.random(0, 255), p.random(0, 255), p.random(0, 255)); 
 
     if (p.mouseX == p.oldX && p.mouseY == p.oldY) { 
 
     p.point(p.mouseX, p.mouseY); 
 
     } else { 
 
     graffitiLine(p.mouseX, p.mouseY, p.oldX, p.oldY); 
 
     } 
 
    } 
 
    p.oldX = p.mouseX; 
 
    p.oldY = p.mouseY; 
 

 
    drawToMain(); 
 
    } 
 

 
    function drawToMain() { 
 

 
    ctx.globalCompositeOperation = 'source-over'; 
 
    ctx.drawImage(img, 0, 0); 
 
    ctx.globalCompositeOperation = 'multiply'; 
 
    ctx.fillStyle = "red"; 
 
    ctx.fillRect(0, 0, main.width, main.height); 
 
    ctx.globalCompositeOperation = 'overlay'; 
 
    ctx.drawImage(c.elt, 0, 0); 
 

 
    } 
 

 
    function graffitiLine(x0, y0, x1, y1) { 
 
    p.line(x0, y0, x1, y1); 
 
    } 
 
}; 
 

 
function init() { 
 
    var myp5 = new p5(s); 
 
} 
 

 
img = new Image(); 
 
img.onload = init; 
 
img.src = "http://previews.123rf.com/images/pyzata/pyzata1307/pyzata130700105/20855013-black-and-white-brick-abstract-texture-background-Stock-Photo.jpg"

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.0/p5.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.0/addons/p5.dom.min.js"></script>

Ps: Я не знаю, почему CSS не работает на хроме, может быть, вам стоит открыть проблему там bugzilla.

Answer 2

Попробуйте CSS:

body{ 
     background: url('http://previews.123rf.com/images/pyzata/pyzata1307/pyzata130700105/20855013-black-and-white-brick-abstract-texture-background-Stock-Photo.jpg') red; 
    background-blend-mode: multiply; 
} 

Это, кажется, работает в ваших codepen фрагмент кода в Chrome.

EDIT:

я неправильно понял вопрос. Вот простой скрипт для холста HTML5: https://jsfiddle.net/hrivas/t2204vxh/ - Я еще не знаю достаточно P5JS.

В принципе, вы должны нарисовать изображение и смешать его с желаемым цветом фона, и когда пришло время рисовать, вы измените режим смешивания (есть несколько, чтобы выбрать из):

var canvas = document.getElementById('myCanvas'); 
var context = canvas.getContext('2d'); 
var img = document.createElement('IMG'); 

img.src = 'http://previews.123rf.com/images/pyzata/pyzata1307/pyzata130700105/20855013-black-and-white-brick-abstract-texture-background-Stock-Photo.jpg'; 

// compose the image and the background when the image is loaded 
img.onload = function() { 
    context.globalCompositeOperation = "multiply"; 
    context.drawImage(img, 0, 0); 

    context.fillStyle = "rgba(255, 0, 0, 1)"; 
    context.fillRect(0, 0, canvas.width, canvas.height); 
} 

document.onmousemove = function() { 
    var x = event.offsetX; 
    var y = event.offsetY; 

    // grafitti brush 
    var r = 0;//parseInt(255 * Math.random()); 
    var g = 0;//parseInt(255 * Math.random()); 
    var b = parseInt(255 * Math.random()); 
    var a = Math.random(); 

    context.fillStyle = "rgba(" + r + "," + g + "," + b + ", " + a; 
    context.globalCompositeOperation = "lighten"; 

    context.moveTo(x, y); 
    context.arc(x, y, 7, 0, 2 * Math.PI); 

    context.fill(); 
} 

Другое чем это, выключение одного или двух цветовых каналов создает изменяющийся эффект интенсивности.

Надеюсь, это поможет!