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

An interactive 3D animation of the Royal Conservatory’s Lemniscate of Continuous Improvement: the method of continuously monitoring the quality of the conservatory programme using internal and external sources.

Lemniscate of Continuous Improvement

Royal Conservatory: Quality Culture

I was invited to create a work for a mixed-media art exhibition around the hard-to-translate Dutch concept of ‘verstilling’.

Algorithmic audiovisual brain holiday

HUSH

Couture Multiples

Atelier Maria Lux

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

Rocketclowns News

Our interactive web animation / sound design project ‘Roberto’s Garden‘ is an interactive web experience with quite a backstory.

Roberto’s Garden featured on babylonjs.com

Our Mobile Podcast Studio page has reached the top spot on Google for the search term ‘mobile podcast studio. Awesome! But how?

SEO: top ranking for our ‘Mobile Podcast Studio’ page

One of the big challenges when working with Oxygen Builder sites is client-friendly content editing

Using Advanced Custom Fields (ACF) Flexible Layout with Oxygen Builder

Embedding HTML5 Canvas into WordPress

Contact us

Developed by Rocketclowns

Lead developer
Olaf Wempe