Comments (3)
Is there a way to set canvas to full document width and height?
You can set the width/height to whatever you want. Just set the properties on it.
Also can you retrieve the current canvas width and height in the component OnAfterRender()?
Today it doesn't support that as the ElementRef
from Blazor doesn't allow you to invoke method/props on it.
from canvas.
You can scale the canvas with css:
canvas {
background-color: #ffffff;
display: block;
position: absolute;
width: 100%;
height: 100%;
}
Its not perfect since you will have issues with unproportional scaling (a square on a 100x100 canvas may be displayed as a rectangle) as long as you dont know the aspect ratio of the canvas.
from canvas.
Ok so i tampered a bit and found a solution.
Put this into your css:
canvas {
background-color: #ffffff;
display: block;
position: fixed;
}
And into your index.html you put this:
<script>
function ResizeCanvas() {
var canvas = document.querySelector('canvas');
canvas.style.width = '100%';
canvas.style.height = '100%';
canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;
return { width: canvas.width, height: canvas.height };
}
</script>
then call ResizeCanvas()
with JSInterop either in the razor or in a cs file.
If you want to get the resulting size of the canvas you can use the return value of ResizeCanvas()
.
from canvas.
Related Issues (20)
- Blazor-server canvas flickering HOT 2
- Could not find 'BlazorExtensions.Canvas2d.add' ('BlazorExtensions' was undefined) HOT 4
- Support for Blazor Canvas Extension in .NET MAUI? HOT 6
- Scaling error. Reset scale?
- WebGL: INVALID_OPERATION: drawArrays: no valid shader program in use
- Resizing the Canvas to fit Container HOT 4
- Can we have the published release with the globalCompositeOperation support
- How to place and Image inside of the Canvas HOT 1
- Just FYI - we have a "mega-fork" of this project with quite a different goal but updated to .net6 and newer ts/webpack
- Colors are misapplied in Blazor WebAssembly ASP.NET Core hosted app when there are multiple asysnc drawings.
- CreatePatternAsync HOT 1
- How to reset the Sketchpad
- Blazor WebAssembly in process runtime
- Unable to change the stroke color per rect.
- Future plans? HOT 2
- MeasureText have only width informations HOT 4
- UniformAsync
- CreateCanvas2D (non async) isn't working
- Mouse Events to NuGet
- BECanvasComponent could not be found HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from canvas.