This is what I want: a page split in two vertical parts: a red one with contents (200px in the fiddle) + the right part is a diagonal that goes top-left (200, 0) to bottom-right of the browser window.
I'd like this line to be responsive to any page changing: every time the page is resized, this line'd be always a neat diagonal between these points. (200, 0 - very bottom-right of the browser window)
I've been trying to manage the canvas function, but may be the wrong way. Can anybody help me?
This will do the trick, check comments for info:
// Get the canvas and the context to draw in
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
function diagonalLineToBottomRight(){
// Reset your canvas to the size of the window - this also clears the canvas
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// Set a line color
context.strokeStyle = 'red';
// Set the point where you line starts
context.moveTo(200, 0);
// Draw the line to the bottom corner
context.lineTo(window.innerWidth, window.innerHeight);
// Actually draw the pixels to the canvas
context.stroke();
}
// Set the function to execute when the window size changes
window.addEventListener('resize', diagonalLineToBottomRight, false);
// Execute the function on initial load
diagonalLineToBottomRight();<canvas id="canvas"></canvas>I am guessing, however, you don't want your canvas to overlap the content on the side. This can be done by combining some CSS and JS to make a canvas that is 200 pixels less wide than you page:
// Get the canvas and the context to draw in
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
function diagonalLineToBottomRight(){
// Reset your canvas to the size of the window - this also clears the canvas
canvas.width = window.innerWidth - 200;
canvas.height = window.innerHeight;
// dont draw when its not wide enough
if(window.innerWidth - 200 < 200) return;
// Set a line color
context.strokeStyle = 'red';
// Set the point where you line starts
context.moveTo(0, 0);
// Draw the line to the bottom corner
context.lineTo(window.innerWidth - 200, window.innerHeight);
// Actually draw the pixels to the canvas
context.stroke();
}
// Set the function to execute when the window size changes
window.addEventListener('resize', diagonalLineToBottomRight, false);
// Execute the function on initial load
diagonalLineToBottomRight();html, body {
height: 100%;
}
nav {
position: absolute;
left: 0;
top: 0;
background: red;
width: 200px;
height: 100%;
}
canvas {
position: fixed;
top: 0;
right: 0;
}<canvas id="canvas"></canvas>
<nav></nav>