Giter Site home page Giter Site logo

Support for <Canvas/> about community HOT 7 OPEN

scrimba avatar scrimba commented on May 24, 2024
Support for

from community.

Comments (7)

judofyr avatar judofyr commented on May 24, 2024 1

Could you wait a bit?

from community.

gre avatar gre commented on May 24, 2024

had a nice discuss with @perborgen around this.

just to add to what i said above, moving from current paradigm where you "snapshot the DOM" over time to a paradigm where you would play the real code and replay all recorded events is tricky..

Not only you need to record all events, like click events.. but also you potentially need to override & sandbox the "timers" (setTimeout, etc..). that way, you might be able to replay something in a deterministic way? There are still hard things like image loading that you can't really control so I don't know if it's easily possible..

But still, even doing that, i'm not even sure how you would solve it if a user "jump" at a given position.. (replay from the start? nah :D)

At the end, there will be probably some tradeoff and the creators will need to be aware of these..


For my gl-react usecase, I was actually thinking a workaround could be that would capture my Canvas at 60fps and when it changes, it would inject a <img src="data64:..."/> in the DOM, just under the canvas (I think my canvas is transparent when it's getting viewed)..

(The thing is, I will need to set some headers,.. don't imagine you can generically do that, for instance, WebGL will give you Black image until you set a preserveDrawingBuffer:true option XD)

I might try that ASAP, I hope I won't spam you too much with all the DOM that will get generated 😅

from community.

perborgen avatar perborgen commented on May 24, 2024

Thanks for the summary @gre. This is indeed a tricky task, and I can't promise if/when we'll be able to fix it, as we have so many other pressing tasks on our list.

Whatever we do, we'll be sure to keep this issue updated :)

from community.

gre avatar gre commented on May 24, 2024

sorry I updated my comment :D do you think it's ok for you if I try my "base64 hack" ?

from community.

gre avatar gre commented on May 24, 2024

yeah, no problem! i'll wait :)

from community.

MisterBrash avatar MisterBrash commented on May 24, 2024

Is it considered bad form to bump a feature request? I'm only mentioning this because using Scrimba to teach the canvas and animations to a high school class would amazing. I recorded a lesson only to find out the hard way that this was an issue... 3 years ago.

from community.

perborgen avatar perborgen commented on May 24, 2024

Hi, we unfortunately won't add this in the near future, as it's not a critical feature for us, and we have very limited resources.

from community.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.