Making canvas visible out of canvas
up vote
0
down vote
favorite
Is it possible to render canvas element out of own area?
In this example I draw a rectangle, which x-coordinate and y-coordinate is a negative value. Is it possible to render whole rectangle? overflow rule doesn't work here.
jsfiddle
html
<div class="container">
<div class="row">
<div class="col">
1 of 2
</div>
<div class="col main">
<canvas id="example" width="150" height="150"></canvas>
</div>
</div>
</div>
javascript
var canvas = document.getElementById("example");
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.rect(-30, -30, 150, 100);
ctx.fillStyle = "red";
ctx.fill();
css
.row {
background: CornflowerBlue;
margin-top: 20px;
}
.col {
padding: 0 !important;
border: solid 1px #6c757d;
padding: 10px;
}
.main, canvas {
overflow: visible;
}
html css css3 html5-canvas
asked Nov 9 at 15:28
Matt
9511352113
add a comment |
up vote
0
down vote
favorite
Is it possible to render canvas element out of own area?
In this example I draw a rectangle, which x-coordinate and y-coordinate is a negative value. Is it possible to render whole rectangle? overflow rule doesn't work here.
jsfiddle
html
<div class="container">
<div class="row">
<div class="col">
1 of 2
</div>
<div class="col main">
<canvas id="example" width="150" height="150"></canvas>
</div>
</div>
</div>
javascript
var canvas = document.getElementById("example");
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.rect(-30, -30, 150, 100);
ctx.fillStyle = "red";
ctx.fill();
css
.row {
background: CornflowerBlue;
margin-top: 20px;
}
.col {
padding: 0 !important;
border: solid 1px #6c757d;
padding: 10px;
}
.main, canvas {
overflow: visible;
}
html css css3 html5-canvas
asked Nov 9 at 15:28
Matt
9511352113
This is not possible. Think of a canvas an interactive image, it's just one element with it's set boundaries, everything inside it is a part of it (rather than a contained element that may be able to break the boundaries) However using a larger canvas and faking the "edge" of the canvas is a possible workaround.
– DBS
Nov 9 at 15:32
Maybe you should explain why do you need it for. Depending on the situation there may be some workarounds.
– enxaneta
Nov 9 at 16:53
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
Is it possible to render canvas element out of own area?
In this example I draw a rectangle, which x-coordinate and y-coordinate is a negative value. Is it possible to render whole rectangle? overflow rule doesn't work here.
jsfiddle
html
<div class="container">
<div class="row">
<div class="col">
1 of 2
</div>
<div class="col main">
<canvas id="example" width="150" height="150"></canvas>
</div>
</div>
</div>
javascript
var canvas = document.getElementById("example");
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.rect(-30, -30, 150, 100);
ctx.fillStyle = "red";
ctx.fill();
css
.row {
background: CornflowerBlue;
margin-top: 20px;
}
.col {
padding: 0 !important;
border: solid 1px #6c757d;
padding: 10px;
}
.main, canvas {
overflow: visible;
}
html css css3 html5-canvas
asked Nov 9 at 15:28
Matt
9511352113
Is it possible to render canvas element out of own area?
In this example I draw a rectangle, which x-coordinate and y-coordinate is a negative value. Is it possible to render whole rectangle? overflow rule doesn't work here.
jsfiddle
html
<div class="container">
<div class="row">
<div class="col">
1 of 2
</div>
<div class="col main">
<canvas id="example" width="150" height="150"></canvas>
</div>
</div>
</div>
javascript
var canvas = document.getElementById("example");
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.rect(-30, -30, 150, 100);
ctx.fillStyle = "red";
ctx.fill();
css
.row {
background: CornflowerBlue;
margin-top: 20px;
}
.col {
padding: 0 !important;
border: solid 1px #6c757d;
padding: 10px;
}
.main, canvas {
overflow: visible;
}
html css css3 html5-canvas
html css css3 html5-canvas
asked Nov 9 at 15:28
Matt
9511352113
asked Nov 9 at 15:28
Matt
9511352113
asked Nov 9 at 15:28
Matt
9511352113
asked Nov 9 at 15:28
Matt
9511352113
asked Nov 9 at 15:28
Matt
9511352113
9511352113
This is not possible. Think of a canvas an interactive image, it's just one element with it's set boundaries, everything inside it is a part of it (rather than a contained element that may be able to break the boundaries) However using a larger canvas and faking the "edge" of the canvas is a possible workaround.
– DBS
Nov 9 at 15:32
Maybe you should explain why do you need it for. Depending on the situation there may be some workarounds.
– enxaneta
Nov 9 at 16:53
add a comment |
This is not possible. Think of a canvas an interactive image, it's just one element with it's set boundaries, everything inside it is a part of it (rather than a contained element that may be able to break the boundaries) However using a larger canvas and faking the "edge" of the canvas is a possible workaround.
– DBS
Nov 9 at 15:32
Maybe you should explain why do you need it for. Depending on the situation there may be some workarounds.
– enxaneta
Nov 9 at 16:53
This is not possible. Think of a canvas an interactive image, it's just one element with it's set boundaries, everything inside it is a part of it (rather than a contained element that may be able to break the boundaries) However using a larger canvas and faking the "edge" of the canvas is a possible workaround.
– DBS
Nov 9 at 15:32
This is not possible. Think of a canvas an interactive image, it's just one element with it's set boundaries, everything inside it is a part of it (rather than a contained element that may be able to break the boundaries) However using a larger canvas and faking the "edge" of the canvas is a possible workaround.
– DBS
Nov 9 at 15:32
Maybe you should explain why do you need it for. Depending on the situation there may be some workarounds.
– enxaneta
Nov 9 at 16:53
Maybe you should explain why do you need it for. Depending on the situation there may be some workarounds.
– enxaneta
Nov 9 at 16:53
add a comment |
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53228647%2fmaking-canvas-visible-out-of-canvas%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
This is not possible. Think of a canvas an interactive image, it's just one element with it's set boundaries, everything inside it is a part of it (rather than a contained element that may be able to break the boundaries) However using a larger canvas and faking the "edge" of the canvas is a possible workaround.
– DBS
Nov 9 at 15:32
Maybe you should explain why do you need it for. Depending on the situation there may be some workarounds.
– enxaneta
Nov 9 at 16:53