Firstly the use of canonical:
The use of canonical is not exactly creating duplicate pages. Every application should avoid creating duplicate pages.
1)Canonical is meant to give seo wieghtage to the main or parent page from which it is derived.
2)This needs not to be exact duplicate, but this means this new page is also generating similar information with the canonical.
3)
This is lot used in blogging/news sites where i want to publish content from other sources to my site and give credits to the actual owner
4) Also used in cases like running a site on both http and https and you take one of them as base for seo crawling. So you add that to another as canonical.
Other useful cases as well exists which make canonical a very important tag and should be used carefully
Adding Canonical via javascript
Though google crawlers are now becoming intelligent enough to understand javascript. But this should be done with best implementation practices and recommendations, otherwise you end up messing with your seo health. As if google does not read canonical properly, you end up penalizing for duplicate content.
https://developers.google.com/webmasters/ajax-crawling/docs/learn-more
Unnecessary content for user, saving space - Useless in described case
The required seo tags don't add up that much which will hurt you front-end performance or help reducing network transfer time.
Yes if you want to tune your page such that you pass all crawler related + most important components of your site in first load, and then load content on demand via ajax then you should go ahead but following best practices if you want that content to be seo friendly.
But for canonical addition via javascript just to save few bytes of transfer is not recommended.
<body>
. I don't see how removing a line of HTML code from the<head>
is going to make any difference to your ad revenue.