Responsive canvas elements

[function]

Καλησπέρα παίδες,

 

Θέλω να φτιάξω ένα canvas html5 game, και θέλω να ρωτήσω πως μπορώ να κάνω responsive όλο το structure των elements/photos/rects/texts που υπάρχουν πάνω στο canvas per breakpoint.

 

π.χ. ασ πάρουμε ένα απλό σενάριο όπου έχω 3 rects 100px πλάτους και 100px ύψους το καθένα και το ένα δίπλα στο άλλο.

Πως μπορώ όταν φτάσω σε ένα συγκεκριμένο breakpoint να πω στο πρώτο πιάσε 300px μήκος και στα άλλο δύο να πάνε από κάτω του και να πιάσουν από 50% μήκος.

 

Σε css/html προφανώς και γνωρίζω να το κάνω, αλλά σε javascript όχι.

 

Μήπως κάποιος θα μπορούσε να βοηθήσει??

 

Ευχαριστώ πολύ.

[The King]

Γιατί δεν κάνεις χρήση κάποιου Responsive Framework όπως Bootstrap ή Foundation ή ένα από τα δεκάδες που υπάρχουν σε συνδυασμό με CSS media queries ή ακόμα καλύτερα Sass media queries και θες να το κάνεις μέσω JS το οποίο έτσι κι αλλιώς πάλι CSS manipulation θα κάνει στην τελική;

 

Ενδεικτικά Responsive Frameworks

Just FYI Responsive JS Library (δε νομίζω ότι θα το χρησιμοποιήσεις)

[function]

Μετα απο 14 χρονια εμπειριας σε sass, stylus κ responsive websites ειπα να δοκιμασω κατισαν κι αυτο...https://codecanyon.net/item/quiz-game-html5-game/15133143 το βρισκω πολυ ενδιαφερον