I am implementing a canvas app into a visualforce page and would like for it to automatically resize based on whether someone is on mobile, different browser window size, etc. I checked the Canvas Developer's guide which says to use the autogrow feature for canvas apps you only need add the following code:

// Turn on auto grow with default settings.
Sfdc.canvas(function() {
sr = JSON.parse('<%=signedRequestJson%>');
Sfdc.canvas.client.autogrow(sr.client);
});

However, when I add this to my visualforce page, nothing happens, and the size of the visualforce page remains default. I have included my visualforce code below:

<apex:page controller="connectDataController" showHeader="false" sidebar="false" standardStylesheets="true" docType="html-5.0" language="en-US" applyHtmlTag="false">      
    
    <apex:canvasApp canvasId="mycanvas0" developerName="x" id="mycanvas0" scrolling="yes"/>
   
<script>
// Turn on auto grow with default settings.
Sfdc.canvas(function() {
sr = JSON.parse('<%=signedRequestJson%>');
Sfdc.canvas.client.autogrow(sr.client);
});
</script>
</apex:page>

Any ideas as to why this isn't working properly?

Thanks