Embedding HTML5 Canvas into WordPress

The animation above is an HTML5 canvas element created in Adobe FlashCC 2015 (soon to be renamed “Adobe Animate“). The published output from FlashCC is uploaded into it’s own directory on our server: http://www.rocketclowns.com/canvas/aquarium/

The element is embedded using an <ifame> tag, which loads and displays content from another URL in your webpage:

<div class="canvas-container">
    <iframe src="http://www.rocketclowns.com/canvas/aquarium/"></iframe>
</div>

As you can see, no width or height is specified. In FlashCC, we created the animation in 21:9 Cinemascope aspect ratio at 1680 x 720 pixels.

Because we need the size of the iframe to be responsive (scaling with the size of the browser window), while keeping the original aspect ratio, we wrapped the iframe in a <div> with the classname “canvas-container”, and we control the size of the wrapping <div> and the <iframe> using CSS:

.canvas-container {
    position: relative;
    padding-bottom: 43%; // (720 ÷ 1680 = 0.4286 = 43%)
    height: 0;
    overflow: hidden;
}

.canvas-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Another thing that may be interesting to note, is that the version of TweenMax.js we’re using in our animation conflicted with a TweenMax version that is loaded by our WordPress theme. The double loading caused ‘TweenMax is not defined’-errors in our console.

Our solution for this is to segregate our own version by defining a window.GreenSockGlobals object where everything will be attached. By default, things get added at the window/global level, but when TweenMax loads, it looks to see if you have defined a GreenSockGlobals object and if it finds one, it’ll attach everything there instead:

<script>
    var rc = window.GreenSockGlobals = {};
</script>
<script src="js/TweenMax.min.js"></script>

From there, we reference our TweenMax instance like this:

rc.TweenMax.to(...);

…et voila: no more conflicts, only fish

Made by Rocketclowns

In memory of Roberto Perez

Roberto’s Garden

Supported by an audio tour produced by Rocketclowns Sound Design.

Recorded and mixed in Studio Tweede Kamer

‘This is the House of Representatives’ exhibition in Dutch Parliament building

During Covid, Ravitatie trainer Menno Fennema recorded a series of meditation training videos and was looking for a way to distribute them via the ravitatie.nl website.

Video training memberships

Ravitatie.nl

Using API data to build a fresh, user friendly UI

Custom API integration

Jobs at ASTRON: integration with Recruitee API

Rocketclowns News

Rocketclowns’ sound design division branches out and gets it’s own websiteand branding

New website for Rocketclowns sound design: olafwempe.com

After a refreshing holiday on the beaches of schiermonnikoog|And Agia Pelagia in Crete, Greece|Rocketclowns are GO!

Post holiday reboot!

I recently learned about the pretty amazing JavaScript WebAudio API That’s a cool name for a Programming Interface that allows you to do all kinds of fun things with sound in your web browser.

Javascript music visualizer

Every now and then, when we really like the outcome of one of our experiments with interactive HTML5 animation, we splash it right on the front page of our site.

Splash page archive: Januari 2016

Contact us

Developed by Rocketclowns

Lead developer
Olaf Wempe