Is it possible to replicate this effect using HTML5 Canvas?

Question

Is it possible to replicate this effect using HTML5 Canvas?

I'm looking to recreate the four shapes showcased on this website using HTML5 Canvas, while ensuring that the page stretches to 100% width and height.

Is this achievable? I am relatively new to working with Canvas.

Below is my current CSS code:

html, body{
    height: 100%;
    margin:0;
}
.out{
    height:100%;
    position:relative;
    overflow:hidden;
}
.in{
    height:75%;
    background-color:#6C2223;
}
.out:before, .out:after, .in:after{
    content:'';
    position:absolute;
    bottom:25%;
    width:100%;
    height:700%;
    background-color:#9A4445;
}
.out:before{
    right:50%;

    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%;

     -webkit-transform : rotate(-45deg);
    transform : rotate(-45deg);
}
.out:after{
    left:50%;

    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;

    -webkit-transform : rotate(45deg);
    transform : rotate(45deg);
}
.in:after{
    bottom:0;
    width:100%;
    height:25%;
    background-color:#911618;
    z-index:-1;
}
img{
    width:100%;
    height:auto;
    position:absolute;
    top:0;
    z-index:3;
    opacity:0.5;
}
.text{
    position:absolute;
    top:0;
    z-index:4;
}

I would appreciate any assistance provided. Thank you.

javascript html css canvas

Answer 1

Answer №1

when only utilizing blending mode, where assets are specific and the grad image is a PNG with gradient

<html>
    <head>
    </head>
    <body>
        <canvas id="canvas" width="800px" height="600px"/>
        <script>
var c = document.getElementById("canvas");
ctx = c.getContext("2d");

var img = new Image();
img.src = "boobs.jpg";
ctx.globalCompositeOperation = "multiply";
ctx.drawImage(img, 20, 20);
var img2 = new Image();
img2.src = "grad.png";
ctx.drawImage(img2, 20, 20);

        </script>
    </body>
</html>

UPDATE: Locate square image 800 x 800

<html>
    <head>
    </head>
    <body>
        <canvas id="canvas" width="800px" height="800px"/>
        <script>
var c = document.getElementById("canvas");
ctx = c.getContext("2d");
ctx.globalCompositeOperation = "multiply";

var img1 = new Image();
img1.src = "tree.png";
ctx.drawImage(img1, 0, 0);

var img2 = new Image();
img2.src = "drops.png";
ctx.drawImage(img2, 0, 0);

var img3 = new Image();
img3.src = "face.png";
ctx.drawImage(img3, 0, 0);

var idt = ctx.getImageData(0, 0, 800, 800);
var xquarter = 800/2;
var yquarter = 800/2;
var x, y;
var imageWidth = 800;
var imageHeight = 800;
for(y = 0; y < imageHeight; y++) {
    for(x = 0; x < imageWidth; x++) {
        if (x > xquarter) {
            if (y > yquarter) {
                idt.data[((imageWidth * y) + x) * 4] += 30;
            } else {
                idt.data[((imageWidth * y) + x) * 4 + 1] += 30;
            }
        } else {
            if (y > yquarter) {
                idt.data[((imageWidth * y) + x) * 4 + 2] += 30;
            } else {
                idt.data[((imageWidth * y) + x) * 4 + 3] += 30;
            }
        }
    }
}
ctx.putImageData(idt,0,0);
        </script>
    </body>
</html>

UPDATE 2:

<html>
    <head>
        <style>
            html, body {
  width:  100%;
  height: 100%;
  margin: 0px;
}
        </style>
    </head>
    <body>
        <canvas id="canvas"/>
        <script>

function foo() {
    var c = document.getElementById("canvas");

    var xcoeff, ycoeff, maxcoeff;
    var screenWidth  = window.innerWidth;
    var screenHeight = window.innerHeight;
    ctx = c.getContext("2d");
    ctx.canvas.width  = screenWidth;
    ctx.canvas.height = screenHeight;
    ctx.globalCompositeOperation = "multiply";

    var img1 = new Image();
    img1.src = "tree.png";
    
    xcoeff = screenWidth / img1.width;
    ycoeff = screenHeight / img1.height;
    maxcoeff = xcoeff > ycoeff ? xcoeff : ycoeff;
    ctx.scale(maxcoeff, maxcoeff);

    ctx.drawImage(img1, 0, 0);


    var img2 = new Image();
    img2.src = "drops.png";
    ctx.drawImage(img2, 0, 0);

    var img3 = new Image();
    img3.src = "face.png";
    ctx.drawImage(img3, 0, 0);
}
foo();
window.onresize = foo;
        </script>
    </body>
</html>

Answer 2

when only utilizing blending mode, where assets are specific and the grad image is a PNG with gradient

<html>
    <head>
    </head>
    <body>
        <canvas id="canvas" width="800px" height="600px"/>
        <script>
var c = document.getElementById("canvas");
ctx = c.getContext("2d");

var img = new Image();
img.src = "boobs.jpg";
ctx.globalCompositeOperation = "multiply";
ctx.drawImage(img, 20, 20);
var img2 = new Image();
img2.src = "grad.png";
ctx.drawImage(img2, 20, 20);

        </script>
    </body>
</html>

UPDATE: Locate square image 800 x 800

<html>
    <head>
    </head>
    <body>
        <canvas id="canvas" width="800px" height="800px"/>
        <script>
var c = document.getElementById("canvas");
ctx = c.getContext("2d");
ctx.globalCompositeOperation = "multiply";

var img1 = new Image();
img1.src = "tree.png";
ctx.drawImage(img1, 0, 0);

var img2 = new Image();
img2.src = "drops.png";
ctx.drawImage(img2, 0, 0);

var img3 = new Image();
img3.src = "face.png";
ctx.drawImage(img3, 0, 0);

var idt = ctx.getImageData(0, 0, 800, 800);
var xquarter = 800/2;
var yquarter = 800/2;
var x, y;
var imageWidth = 800;
var imageHeight = 800;
for(y = 0; y < imageHeight; y++) {
    for(x = 0; x < imageWidth; x++) {
        if (x > xquarter) {
            if (y > yquarter) {
                idt.data[((imageWidth * y) + x) * 4] += 30;
            } else {
                idt.data[((imageWidth * y) + x) * 4 + 1] += 30;
            }
        } else {
            if (y > yquarter) {
                idt.data[((imageWidth * y) + x) * 4 + 2] += 30;
            } else {
                idt.data[((imageWidth * y) + x) * 4 + 3] += 30;
            }
        }
    }
}
ctx.putImageData(idt,0,0);
        </script>
    </body>
</html>

UPDATE 2:

<html>
    <head>
        <style>
            html, body {
  width:  100%;
  height: 100%;
  margin: 0px;
}
        </style>
    </head>
    <body>
        <canvas id="canvas"/>
        <script>

function foo() {
    var c = document.getElementById("canvas");

    var xcoeff, ycoeff, maxcoeff;
    var screenWidth  = window.innerWidth;
    var screenHeight = window.innerHeight;
    ctx = c.getContext("2d");
    ctx.canvas.width  = screenWidth;
    ctx.canvas.height = screenHeight;
    ctx.globalCompositeOperation = "multiply";

    var img1 = new Image();
    img1.src = "tree.png";
    
    xcoeff = screenWidth / img1.width;
    ycoeff = screenHeight / img1.height;
    maxcoeff = xcoeff > ycoeff ? xcoeff : ycoeff;
    ctx.scale(maxcoeff, maxcoeff);

    ctx.drawImage(img1, 0, 0);


    var img2 = new Image();
    img2.src = "drops.png";
    ctx.drawImage(img2, 0, 0);

    var img3 = new Image();
    img3.src = "face.png";
    ctx.drawImage(img3, 0, 0);
}
foo();
window.onresize = foo;
        </script>
    </body>
</html>

Is it possible to replicate this effect using HTML5 Canvas?

Answer №1

Similar questions

Ways to create a function to adjust the color of a slider track

Guide to configuring capybara-webkit for testing ajax requests and capturing screenshots containing HTML with loaded CSS and JavaScript

Is it possible to refresh text in table without clearing icons?

What is the best way to retrieve information from an external JSON file using Ionic?

Import Image Data into AngularJS

Tips on connecting a JavaScript object to its AngularJS resource

Is there a concept of negative margin "wrapping"?

jQuery does not function properly when used with string variables

Generating an SQL query that produces interactive buttons that users can click with the goal of potentially altering the contents of a DIV element

Is it possible to create two separate Express sessions simultaneously?

Is it best to remove trailing/leading whitespace from user input before insertion into the database or during the input process?

Guide to creating a Discord bot that replies privately to users without other channel members being able to see the messages

Exploring querying techniques in Node.js

Issue with rendering buttons and images with incorrect width and height in Safari

The list is shifting unexpectedly as the font size transitions

Vercel Next JS features server and client components with distinct timezones

Using AngularJS to dynamically apply a CSS class to message text depending on the HTTP post response

Creating a fixed column with DataTables in Bootstrap 4 and applying transparency to it within a

Make a JSONP request with the MIME Type set to text/plain

The Bootstrap modal window refuses to shut down