How to make canvas responsive
To change width is not that hard. Just remove the width
attribute from the tag and add width: 100%;
in the css for #canvas
#canvas{
border: solid 1px blue;
width: 100%;
}
Changing height is a bit harder: you need javascript. I have used jQuery because i'm more comfortable with.
you need to remove the height
attribute from the canvas tag and add this script:
<script>
function resize(){
$("#canvas").outerHeight($(window).height()-$("#canvas").offset().top- Math.abs($("#canvas").outerHeight(true) - $("#canvas").outerHeight()));
}
$(document).ready(function(){
resize();
$(window).on("resize", function(){
resize();
});
});
</script>
You can see this fiddle: https://jsfiddle.net/1a11p3ng/3/
EDIT:
To answer your second question. You need javascript
0) First of all i changed your #border id into a class since ids must be unique for an element inside an html page (you can't have 2 tags with the same id)
.border{
border: solid 1px black;
}
#canvas{
border: solid 1px blue;
width: 100%;
}
1) Changed your HTML to add ids where needed, two inputs and a button to set the values
<div class="row">
<div class="col-xs-2 col-sm-2 border">content left</div>
<div class="col-xs-6 col-sm-6 border" id="main-content">
<div class="row">
<div class="col-xs-6">
Width <input id="w-input" type="number" class="form-control">
</div>
<div class="col-xs-6">
Height <input id="h-input" type="number" class="form-control">
</div>
<div class="col-xs-12 text-right" style="padding: 3px;">
<button id="set-size" class="btn btn-primary">Set</button>
</div>
</div>
canvas
<canvas id="canvas"></canvas>
</div>
<div class="col-xs-2 col-sm-2 border">content right</div>
</div>
2) Set the canvas height and width so that it fits inside the container
$("#canvas").outerHeight($(window).height()-$("#canvas").offset().top-Math.abs( $("#canvas").outerHeight(true) - $("#canvas").outerHeight()));
3) Set the values of the width and height forms
$("#h-input").val($("#canvas").outerHeight());
$("#w-input").val($("#canvas").outerWidth());
4) Finally, whenever you click on the button you set the canvas width and height to the values set. If the width value is bigger than the container's width then it will resize the canvas to the container's width instead (otherwise it will break your layout)
$("#set-size").click(function(){
$("#canvas").outerHeight($("#h-input").val());
$("#canvas").outerWidth(Math.min($("#w-input").val(), $("#main-content").width()));
});
See a full example here https://jsfiddle.net/1a11p3ng/7/
UPDATE 2:
To have full control over the width you can use this:
<div class="container-fluid">
<div class="row">
<div class="col-xs-2 border">content left</div>
<div class="col-xs-8 border" id="main-content">
<div class="row">
<div class="col-xs-6">
Width <input id="w-input" type="number" class="form-control">
</div>
<div class="col-xs-6">
Height <input id="h-input" type="number" class="form-control">
</div>
<div class="col-xs-12 text-right" style="padding: 3px;">
<button id="set-size" class="btn btn-primary">Set</button>
</div>
</div>
canvas
<canvas id="canvas">
</canvas>
</div>
<div class="col-xs-2 border">content right</div>
</div>
</div>
<script>
$(document).ready(function(){
$("#canvas").outerHeight($(window).height()-$("#canvas").offset().top-Math.abs( $("#canvas").outerHeight(true) - $("#canvas").outerHeight()));
$("#h-input").val($("#canvas").outerHeight());
$("#w-input").val($("#canvas").outerWidth());
$("#set-size").click(function(){
$("#canvas").outerHeight($("#h-input").val());
$("#main-content").width($("#w-input").val());
$("#canvas").outerWidth($("#main-content").width());
});
});
</script>
https://jsfiddle.net/1a11p3ng/8/
the content left and content right columns will move above and belove the central div if the width is too high, but this can't be helped if you are using bootstrap. This is not, however, what responsive means. a truly responsive site will adapt its size to the user screen to keep the layout as you have intended without any external input, letting the user set any size which may break your layout does not mean making a responsive site.
How to make the content in your canvas responsive?
Hi I have found that you should make a calculation of the width and height.
So that the content is responsive in the canvas.
See the link for the end result:
function getId(id) { return document.getElementById(id); }
const canvasA = getId('canvasA');canvasA.ctx = canvasA.getContext("2d");
const canvasB = getId('canvasB');canvasB.ctx = canvasB.getContext("2d");
const canvasC = getId('canvasC');canvasC.ctx = canvasC.getContext("2d");
const requestAnimation = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;window.requestAnimationFrame = requestAnimation;
class Rectangle { constructor(x = 0, y = 0, w = 5, h = 5, color = '#0ff') { this.x = x; this.y = y; this.w = w; this.h = h; this.color = color; }
Update(x, y, w, h) { this.x = x; this.y = y; this.w = w; this.h = h; }
Draw(cvs) { let ctx = cvs.ctx; ctx.beginPath(); ctx.fillStyle = this.color; ctx.fillRect( //centers the width of the rectangle this.x - this.w / 2, //centers the height of the rectangle this.y - this.h / 2, this.w, this.h); ctx.stroke(); ctx.fill(); ctx.closePath(); }}
let rect, fragmentA, fragmentB, fragmentC;
function SetUp() { Start(); Update();}
function Start() { rect = new Rectangle(50, 50, 100, 100);}
function Update() { canvasA.width = window.innerWidth * 0.9; canvasA.height = 200; canvasB.width = window.innerWidth * 0.5; canvasB.height = 200; canvasC.width = window.innerWidth * 0.4; canvasC.height = 200; // Getting 1/10 of the width fragmentA = canvasA.width * 0.1; fragmentB = canvasB.width * 0.1; fragmentC = canvasC.width * 0.1;
rect.Update(canvasA.width / 2, canvasA.height / 2, fragmentA * 2, fragmentA * 2) rect.Draw(canvasA); rect.Update(canvasB.width / 2, canvasB.height / 2, fragmentB * 2, fragmentB * 2) rect.Draw(canvasB); rect.Update(canvasC.width / 2, canvasC.height / 2, fragmentC * 2, fragmentC * 2) rect.Draw(canvasC); requestAnimationFrame(Update);}
SetUp();
canvas { margin: -4px -5px; border-style: solid; left: 0px; top: 0px;}
<canvas id='canvasA'></canvas><canvas id='canvasB'></canvas><canvas id='canvasC'></canvas>
how to make a canvas responsive
Try to set #myCanvas { width: 100%; }
in the css.
How to prevent canvas from overflowing the card and make it responsive in vuetify?
A canvas element can be sized arbitrarily by a style sheet, its bitmap is then subject to the 'object-fit' CSS property.
Source
The width/height of the canvas element are different from the width/height of the canvas element's bitmap. This means that you can use only CSS styles to fix this problem.
canvas {
width: 100%;
height: 100%;
object-fit: cover;
}
Example
If you want to maintain the aspect ratio you can use the padding trick.
.canvas-container {
width: 100%;
padding-top: 100%; // for 1:1 ratio
}
Example
Related Topics
Timing Within a CSS Image Slider
How to Stop a CSS Keyframe Animation
CSS Selector for Shadow Root or All Top Level Elements in Shadow Root
Putting Buttons and Links Over Particles.Js Script (Z-Index)
CSS Flex-Basis: 0% Has Different Behaviour to Flex-Basis: 0Px
Why Is The Top Border of This Inline Element Not Displaying and Why Does Using Float Correct This
How to Seamlessly Align Block Divs of Different Sizes
Bootstrap Scrollspy Link Active Not Applied
Vs Code Live SASS Compiler Not Updating Files
HTML Div Width 100% Not Functioning
CSS: Show Style on Hover Over Multiple Divs Placed One Over Another
How to Move Scrollbar from Left to Right in CSS
Wrapper Question When Containing Floating Divs
Center Image and Text at Large Width, Allow Both to Shrink at Small Width
How to Change The Font of Some Textoutput Elements