Comments (5)
Oh I didn't notice this! Thanks for the links and the research.
I think this is something we can definitely address in the library. I'm going to keep it open to look into it before releasing the new version (which is quite different from the published one).
I think we will do something like what they ended up in src/Native/Graphics/Collage.js#L296-L301.
For now, you can work around it, which is great, but involves some setup work. You can pass the devicePixelRatio as a Flag to the program, and then set the style width and height to the size you want and the attributes width and height to those dimensions multiplied by the pixel ratio. Something like
[ width (w * pixelRatio)
, height (h * pixelRatio)
, style "width" (String.fromInt w ++ "px")
, style "height" (String.fromInt h ++ "px")
]
As the attributes for the element.
I think this should be automatic though, so something to work on. Not sure if it is easiest to handle on the web component directly, will see.
from elm-canvas.
I've added a fix to the elm-canvas npm package and published 2.1.0, it seems to work well 👍 see https://chimeces.com/elm-canvas/cubic-disarray.html for example
from elm-canvas.
Hmm now that 3.0.0 is out, are there any up to date examples to work from?
My previous code complains of things like "CanvasColor stopped existing" and "what's a Canvas.command?"
from elm-canvas.
Hi Jesse.
All examples in examples/ are up to date and working.
The setup in the HTML is the same, just ensure you are loading the 2.1 web component if you want the HiDpi fix.
The examples may be a bit complex to parse so I would recommend having a look at NewApiTest.elmfor a small summary one.
I also spent a lot of effort writing the docs for the package site (Canvas). I think if you spend 10 minutes reading through you will see what the new version is about, I would appreciate any feedback on things that don’t make sense.
V3 is a more high level version than v2, less DOM like and more elm-like. You don’t need to worry about the settings affecting things globally, and other canvas inconveniences. I would love if you try it and find it convenient to migrate, as I do think it is better, but keep in mind that v2 is there and working fine so also feel free to stick with it if it works well for you and you don’t want to bother. The hidpi fixes work for v2 too.
Looking forward to any feedback. I’d also love to know what you are using it for, since I want to write something up at some point and I’d like to emphasize use cases or pros of this approach versus svg or webgl.
from elm-canvas.
I’ve opened #6 to track better documenting how to get Color and what it is, since that may be confusing
from elm-canvas.
Related Issues (20)
- Improve transform docs
- Improve arc docs
- Document the canvas coordinate system
- Add making textures from DOM images HOT 1
- Canvases get blank on deleting one of them from a List HOT 2
- DOM images textures break in Firefox HOT 6
- High CPU load with many canvases HOT 7
- Sampling Canvas Data (getImageData) HOT 3
- Text Color Support HOT 1
- Use `Result` rather than `Maybe` for texture loading HOT 1
- Use elm-geometry types? HOT 1
- Support for "groups" or similar batching of settings to multiple `Renderable` HOT 4
- Runtime crash with `arc` function and negative radius
- Regression: text without fill or stroke is rendered with both fill and stroke
- Not working HOT 3
- Unexpected scene HOT 1
- Question about filter HOT 1
- Please support `roundRect` HOT 2
- Margin bug: canvas and elm-canvas don't share the same height HOT 4
- closePath operation HOT 1
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 elm-canvas.