How do I markup a page with an HTML5 canvas such that the canvas
Takes up 80% of the width
Has a corresponding pixel height and width which effectively define the ratio (and are proportionally maintained when the canvas is stretched to 80%)
Is centered both vertically and horizontally
You can assume that the canvas is the only thing on the page, but feel free to encapsulate it in divs if necessary.
This will center the canvas horizontally:
#canvas-container {
width: 100%;
text-align:center;
}
canvas {
display: inline;
}
HTML:
<div id="canvas-container">
<canvas>Your browser doesn't support canvas</canvas>
</div>
Looking at the current answers I feel that one easy and clean fix is missing. Just in case someone passes by and looks for the right solution.
I am quite successful with some simple CSS and javascript.
Center canvas to middle of the screen or parent element. No wrapping.
HTML:
<canvas id="canvas" width="400" height="300">No canvas support</canvas>
CSS:
#canvas {
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin:auto;
}
Javascript:
window.onload = window.onresize = function() {
var canvas = document.getElementById('canvas');
canvas.width = window.innerWidth * 0.8;
canvas.height = window.innerHeight * 0.8;
}
Works like a charm - tested: firefox, chrome
fiddle: http://jsfiddle.net/djwave28/j6cffppa/3/
easiest way
put the canvas into paragraph tags like this:
<p align="center">
<canvas id="myCanvas" style="background:#220000" width="700" height="500" align="right"></canvas>
</p>
Tested only on Firefox:
<script>
window.onload = window.onresize = function() {
var C = 0.8; // canvas width to viewport width ratio
var W_TO_H = 2/1; // canvas width to canvas height ratio
var el = document.getElementById("a");
// For IE compatibility http://www.google.com/search?q=get+viewport+size+js
var viewportWidth = window.innerWidth;
var viewportHeight = window.innerHeight;
var canvasWidth = viewportWidth * C;
var canvasHeight = canvasWidth / W_TO_H;
el.style.position = "fixed";
el.setAttribute("width", canvasWidth);
el.setAttribute("height", canvasHeight);
el.style.top = (viewportHeight - canvasHeight) / 2;
el.style.left = (viewportWidth - canvasWidth) / 2;
window.ctx = el.getContext("2d");
ctx.clearRect(0,0,canvasWidth,canvasHeight);
ctx.fillStyle = 'yellow';
ctx.moveTo(0, canvasHeight/2);
ctx.lineTo(canvasWidth/2, 0);
ctx.lineTo(canvasWidth, canvasHeight/2);
ctx.lineTo(canvasWidth/2, canvasHeight);
ctx.lineTo(0, canvasHeight/2);
ctx.fill()
}
</script>
<body>
<canvas id="a" style="background: black">
</canvas>
</body>
in order to center the canvas within the window +"px" should be added to el.style.top and el.style.left.
el.style.top = (viewportHeight - canvasHeight) / 2 +"px";
el.style.left = (viewportWidth - canvasWidth) / 2 +"px";
Resizing canvas using css is not a good idea. It should be done using Javascript. See the below function which does it
function setCanvas(){
var canvasNode = document.getElementById('xCanvas');
var pw = canvasNode.parentNode.clientWidth;
var ph = canvasNode.parentNode.clientHeight;
canvasNode.height = pw * 0.8 * (canvasNode.height/canvasNode.width);
canvasNode.width = pw * 0.8;
canvasNode.style.top = (ph-canvasNode.height)/2 + "px";
canvasNode.style.left = (pw-canvasNode.width)/2 + "px";
}
demo here : http://jsfiddle.net/9Rmwt/11/show/
.
Simple:
<body>
<div>
<div style="width: 800px; height:500px; margin: 50px auto;">
<canvas width="800" height="500" style="background:#CCC">
Your browser does not support HTML5 Canvas.
</canvas>
</div>
</div>
</body>
Given that canvas is nothing without JavaScript, use JavaScript too for sizing and positionning (you know: onresize, position:absolute, etc.)
As to the CSS suggestion:
#myCanvas {
width: 100%;
height: 100%;
}
By the standard, CSS does not size the canvas coordinate system, it scales the content. In Chrome, the CSS mentioned will scale the canvas up or down to fit the browser's layout. In the typical case where the coordinate system is smaller than the browser's dimensions in pixels, this effectively lowers the resolution of your drawing. It most likely results in non-proportional drawing as well.
Same codes from Nickolay above, but tested on IE9 and chrome (and removed the extra rendering):
window.onload = window.onresize = function() {
var canvas = document.getElementById('canvas');
var viewportWidth = window.innerWidth;
var viewportHeight = window.innerHeight;
var canvasWidth = viewportWidth * 0.8;
var canvasHeight = canvasWidth / 2;
canvas.style.position = "absolute";
canvas.setAttribute("width", canvasWidth);
canvas.setAttribute("height", canvasHeight);
canvas.style.top = (viewportHeight - canvasHeight) / 2 + "px";
canvas.style.left = (viewportWidth - canvasWidth) / 2 + "px";
}
HTML:
<body>
<canvas id="canvas" style="background: #ffffff">
Canvas is not supported.
</canvas>
</body>
The top and left offset only works when I add px.
Make a line in the center and make it transparent.
This line will be the fulcrum to center the content in the canvas
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.strokeStyle = 'transparent';
context.moveTo(width/2, 0);
context.lineTo(width/2, height);
context.stroke();
context.textAlign = 'center';
with width height being the size of the html canvas
Wrapping it with div should work. I tested it in Firefox, Chrome on Fedora 13 (demo).
#content {
width: 95%;
height: 95%;
margin: auto;
}
#myCanvas {
width: 100%;
height: 100%;
border: 1px solid black;
}
And the canvas should be enclosed in tag
<div id="content">
<canvas id="myCanvas">Your browser doesn't support canvas tag</canvas>
</div>
Let me know if it works. Cheers.
Related
Can an image be used as a mask when using the mix-blend-mode and webkit-mask-composites. For example can I use a white circle as a mask over another image to show only the area contained within both elements. Not what is outside either of the elements. See image the original image being the blue square and the mask being the circle. I want to only show the little bit of the image left after the mask is applied. Please note that this is a simple example my actual mask is a lot more complex and cannot be mimicked by a basic shape.mask
If you want jQuery I got a solution for you:
function addOverlapBox() {
var wrapper = $('#wrapper'),
div1 = $('#div1'),
div2 = $('#div2'),
overlay = $('<div id="overlay"></div>');
wrapper.append(overlay);
setInterval(function() {
theta += 0.01;
div1 = $('#div1'),
div2 = $('#div2'),
overlay = $('#overlay');
var l1=100 + 20*Math.cos(theta);
var t1=80 + 50*Math.sin(theta);
var w1=div1.width();
var h1=div1.height();
var l2=70 + 30*Math.cos(2*theta);//div2.offset().left-8;
var t2=90 + 32*Math.sin(theta);//div2.offset().top-8;
var w2=div2.width();
var h2=div2.height();
div1.css({'top': t1, 'left': l1});
div2.css({'top': t2, 'left': l2});
var top = Math.max(t1,t2);
var left = (l2>l1 && l2<(l1+w1)) ? l2 : (l1>l2 && l1<(l2+w2)) ? l1 : 0;
var width = Math.max(Math.min(l1+w1,l2+w2) - Math.max(l1,l2),0);
var height = Math.max(Math.min(t1+h1,t2+h2) - Math.max(t1,t2),0);
overlay.css({'top': top, 'left': left, 'width': width, 'height': height});
}, 10);
}
function rgb2hex(rgb) {
rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
function hex(x) {
return ("0" + parseInt(x).toString(16)).slice(-2);
}
return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}
theta = 0;
addOverlapBox();
#wrapper {position:absolute; margin-top:0px; width:500px; height:300px;padding: 0px;}
#div1 {background-color:rgba(100, 20, 180, 1); width:80px; height:80px;position:absolute; left:60px; top: 50px; z-index:2;border:0;}
#div2 {background-color:rgba(249, 177, 67, 1); width:110px; height:70px; position:absolute; left:60px; top: 100px; z-index:1;border:0;}
#overlay {background-color:rgba(0, 0, 0, 1); position:absolute;z-index:10;border:0;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div id="div1"></div>
<div id="div2"></div>
</div>
It's a animated so you can see that it's not just another div, where the divs intersect. That doesnt work with border-radius:50% i.e. tho because divs with rounded borders are actually still rectangles, just with a hidden border-radius.You can find a non-animated version here: http://jsfiddle.net/GApu5/32/
Probably you should use css property
clip-path
https://css-tricks.com/almanac/properties/c/clip/
if you want to just mask it.
I have a rails app that's loading external websites (mostly articles) inside an iframe. And I've gotten the majority of the articles to be responsive on any device. I'm only having trouble with articles from certain websites on mobile Safari.
Examples:
1. http://vyrtex-staging.herokuapp.com/article/what-went-wrong-in-flint
2. http://vyrtex-staging.herokuapp.com/article/built-on-passion-how-vox-media-grew-from-its-roots-as-an-oakland-a-s-blog-into-one-of-the-internet-s-biggest-publishers
3. http://vyrtex-staging.herokuapp.com/article/why-isn-t-america-paying-attention-to-trevor-noah
Here is what each of those look on mobile safari:
1. http://i.imgur.com/UAsiJD3.jpg
2. http://i.imgur.com/QgYiOsp.jpg
3. http://i.imgur.com/4wg8y9w.jpg
They look completely fine on desktop Safari, and desktop/mobile Chrome — only mobile Safari is the issue.
Here's my CSS:
.body_container {
width:100%;
height: 100vh;
padding-top:5px;
position: relative;
background-color: white;
}
.intrinsic-container {
position: relative;
height: 0;
-webkit-overflow-scrolling: touch !important;
overflow: scroll !important;
}
.intrinsic-container iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
Here's my HTML:
<div class="body_container">
<div class="intrinsic-container">
<iframe src="<%= #article.url %>"></iframe>
</div>
</div>
And here the javascript I'm running to keep the iframe responsive (the iframe itself, not necessarily the content inside of it):
<script>
var $iframes = $( "iframe" );
// Find & save the aspect ratio for all iframes
$(".intrinsic-container").each(function () {
$( this ).data( "ratio", this.height / this.width )
// Remove the hardcoded width & height attributes
.removeAttr( "width" )
.removeAttr( "height" );
});
$(document).ready( function () {
$(".intrinsic-container").each( function() {
// Get the parent container's width
var width = $( this ).parent().width();
var height = $( this ).parent().height() - $("#navbar").height();
var ratio = height / width;
var ratioString = String(ratio*100)+"%";
$(this).css('padding-bottom',ratioString)
$( this ).width( width )
.height( width * $( this ).data( "ratio" ) );
});
});
// Resize the iframes when the window is resized
$( window ).resize( function () {
$(".intrinsic-container").each( function() {
// Get the parent container's width
var width = $( this ).parent().width();
var height = $( this ).parent().height() - $("header").height();
var ratio = height / width;
var ratioString = String(ratio*100)+"%";
$(this).css('padding-bottom',ratioString)
$( this ).width( width )
.height( width * $( this ).data( "ratio" ) );
});
// Resize to fix all iframes on page load.
}).resize();
</script>
I'm guessing this is probably a CSS issue, where I have to add some webkit stuff to make sure the content inside the iframe loads responsively. Any thoughts on how I can fix this?
I am trying to create a front-page with a Youtube video as a Background and a fixed transparent navigation. I have both but I want the video background to start at the very top of the page. Here is an example;
#bigvid{
https://jsfiddle.net/ackvq0x2/1/embedded/result/
How do get it done ?
Hi, you could use tubular: http://www.seanmccambridge.com/tubular/
as tubular is quite suffisticated, i extracted the necessary code
for you. (renders the video in full width and height, NOT stetched, similar to a css cover image)
html code:
<div id="player-container" style="overflow: hidden; position: absolute; width: 100%; height: 100%;">
<div id="player" style="position: absolute">
</div>
here comes the complete youtube API cover style stuff, extracted from
tubular. jquery is needed. Also the standard youtube html5 iframe api
code must be included - as given here:
https://developers.google.com/youtube/iframe_api_reference#Getting_Started
var ratio = 16 / 9;
window.onPlayerReady = function (e) {
resize();
}
$(window).on('resize', function () {
resize();
})
var resize = function () {
console.log("resize");
var heightcorrection = 0,
width = $(window).width(),
pWidth, // player width, to be defined
height = $(window).height() - heightcorrection,
pHeight, // player height, tbd
$videoPlayer = $('#player');
if (width / ratio < height) { // if new video height < window height (gap underneath)
pWidth = Math.ceil(height * ratio); // get new player width
$videoPlayer.width(pWidth).height(height).css({
left: (width - pWidth) / 2,
top: 0
}); // player width is greater, offset left; reset top
} else { // new video width < window width (gap to right)
pHeight = Math.ceil(width / ratio); // get new player height
$videoPlayer.width(width).height(pHeight).css({
left: 0,
top: (height - pHeight) / 2
}); // player height is greater, offset top; reset left
}
}
I am trying to zoom contents of div(same behavior as browser zoom). After searching a lot I found css 3 transform scale property will full fill this requirement.
The content is zooming when I increase the scale size but I am losing the contents of the div. overflow: hidden also didn't help.
var currentZoom = 1.0;
$(document).ready(function () {
$('#btn_ZoomIn').click(
function () {
currentZoom = currentZoom+0.04;
var scaleString = "scale("+currentZoom+")";
$('#divName').css("transform", scaleString);
})
$('#btn_ZoomOut').click(
function () {
//var scaleString = "scale("+currentZoom -= .1+")";
currentZoom = currentZoom-0.04;
var scaleString = "scale("+currentZoom+")";
$('#divName').css("transform", scaleString);
})
});
Js fiddle link: http://jsfiddle.net/chaitut715/k4WsB/
Add a container around #divName:
<div class="wrapper">
<div id="divName">
<img src="https://www.google.co.in/intl/en_ALL/images/srpr/logo11w.png"></img>
</div>
</div>
And set overflow: hidden; on the new container:
.wrapper {
overflow: hidden; /* 'auto' would probably be better */
width: 500px;
}
Working demo
I can't seem to scale a canvas that's populated by an image within a fixed container in IE9. anyone know a work around? I recall reading some other thread about how IE treats a canvas as a block element
<style type="text/css">
#container { max-width: 25%; max-height: 25%; }
canvas { max-width: 90%; max-height: 90%; }
</style>
<script type="text/javascript">
var img = new Image();
img.src = 'http://l.yimg.com/dh/ap/default/121214/babydeer340.jpg';
img.onload = function () {
$('canvas').each(function () {
var ctx = this.getContext("2d");
ctx.drawImage(img, 0, 0);
});
};
</script>
<div id="container">
<canvas id='fit-to-specified-width-height-with-aspect-ratio'></canvas>
</div>
<canvas id='normal'></canvas>
http://jsfiddle.net/VAXrL/535/
I too wish this behavior was consistent in all browsers but it looks like IE9 and a couple others treat canvas like a block level element and so you would need to style both width and height.
The canvas element will have to rely on hard pixels in its size since it is rasterized. One approach would be to calculate and set these pixels based on the original size of the image and a desired scale.
I forked your JSFiddle: http://jsfiddle.net/cbosco/ttU5L/3/
var img = new Image();
var SCALE = 0.25;
img.onload = function () {
$('canvas').each(function () {
var w = img.width;
var h = img.height;
w *= SCALE;
h *= SCALE;
this.width = w;
this.height = h;
var ctx = this.getContext("2d");
ctx.scale(SCALE, SCALE);
ctx.drawImage(img, 0, 0);
});
};
// good idea to set src attribute AFTER the onload handler is attached
img.src = 'http://l.yimg.com/dh/ap/default/121214/babydeer340.jpg';