Shim with hole (Canvas)

Developer
Karsten Buckstegge
Size
3,487 Kb
Views
46,552
  1. Shim with hole (Canvas) Previews
  2. Shim with hole (Canvas) HTML Codes
  3. Shim with hole (Canvas) CSS Codes
  4. Shim with hole (Canvas) JS Codes

How do I make an shim with hole (canvas)?

An overlay shim with a hole created with canvas magic.. What is a shim with hole (canvas)? How do you make a shim with hole (canvas)? This script and codes were developed by Karsten Buckstegge on 28 September 2022, Wednesday.

Shim with hole (Canvas) Previews
IQ Test

Shim with hole (Canvas) - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Shim with hole (Canvas)</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="content"> <div class="text"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia illum iste, ea quis optio rem vel beatae iure soluta hic eaque, ratione id, quod perspiciatis voluptatem ad fugiat enim! </div> <div class="stuff"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis ullam maiores ipsa repellat sit et enim? Numquam veniam ipsam dolorem soluta molestias at corporis saepe illum, iste velit earum unde perferendis. Perspiciatis dignissimos illum provident nemo natus quos similique qui vitae nulla commodi. Assumenda delectus hic ratione eum incidunt tempora. </div>
</div>
<svg> <defs> <clipPath id="clipping"> <rect id="r1" x="20" y="20" width="240" height="290" /> </clipPath> </defs>
</svg>
<canvas id="shim" class="shim"></canvas> <script src="js/index.js"></script>
</body>
</html>

Shim with hole (Canvas) - Script Codes CSS Codes

body * { box-sizing: border-box;
}
.text { display: inline-block; width: 200px; height: 250px; margin: 40px; padding: 20px; background: #bada55;
}
.stuff { display: inline-block; margin: 40px; width: 400px;
}
.shim { position: fixed; top: 0; left: 0;
}

Shim with hole (Canvas) - Script Codes JS Codes

'use strict';
var canvas = document.getElementById('shim');
var context = canvas.getContext('2d');
var windowWidth = undefined;
var windowHeight = undefined;
var createHole = function createHole(context, x, y, width, height, radius, fill) { context.beginPath(); context.moveTo(x, y + radius); context.lineTo(x, y + height - radius); context.arcTo(x, y + height, x + radius, y + height, radius); context.lineTo(x + width - radius, y + height); context.arcTo(x + width, y + height, x + width, y + height - radius, radius); context.lineTo(x + width, y + radius); context.arcTo(x + width, y, x + width - radius, y, radius); context.lineTo(x + radius, y); context.arcTo(x, y, x, y + radius, radius); context.fillStyle = fill; context.fill(); context.restore();
};
var drawCanvas = function drawCanvas() { context.save(); context.clearRect(0, 0, canvas.width, canvas.height); // draw shim context.beginPath(); context.rect(0, 0, canvas.width, canvas.height); context.fillStyle = 'rgba(0, 0, 0, .4)'; context.fill(); // set global composite context.globalCompositeOperation = 'destination-out'; // draw hole createHole(context, 20, 20, 240, 240, 10, 'black');
};
var resizeCanvas = function resizeCanvas() { windowWidth = window.innerWidth; windowHeight = window.innerHeight; canvas.width = windowWidth; canvas.height = windowHeight; drawCanvas();
};
// resize the canvas to fill browser window dynamically
window.addEventListener('resize', resizeCanvas, false);
resizeCanvas();
Shim with hole (Canvas) - Script Codes
Shim with hole (Canvas) - Script Codes
Home Page Home
Developer Karsten Buckstegge
Username MrBambule
Uploaded September 28, 2022
Rating 3
Size 3,487 Kb
Views 46,552
Do you need developer help for Shim with hole (Canvas)?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Karsten Buckstegge (MrBambule) Script Codes
Name
The wheel of social fortune
Freddy the Fly
Broken TV
Even More Brokener TV
The wheel of social
Base64 SVG Me
Responsive CSS arrow bar with transparent borders
Scalable animated css menu button
CSS3 Hover Button
Dropdown Menu Animation
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!