Amazonの虫眼鏡のように画像を拡大表示したい。

###前提・実現したいこと
Canvas上に描画された画像を虫眼鏡のように拡大表示させたいと考えています。
以下のサイトを参考にしたのですが、<img>は拡大できたのですがCanvasは無理でした。
https://github.com/jdbartlett/loupe
https://github.com/okfocus/okzoom
Canvas上の画像を拡大表示させる良い方法はありますでしょうか？
ご回答を頂けると助かります_(..)

###追記
補足です。

###該当のソースコード

javascript
1var img = new Image;
2img.src = "picture/sample1.png";
3img.onload = function(){
4  var canvas = document.getElementById("canvas_target");
5  if(canvas.getContext){
6    var context = canvas.getContext("2d");
7    context.drawImage(img, 0, 0);
8  }
9}

上記のようにして表示したCanvasの画像を虫眼鏡のように拡大表示する方法です。
imgタグに対してはできても、それ以外にはできないものが多いような気がして…

行動規範の内容に同意します

回答2件

redoPop/loupe を使う
先に canvas で拡大サイズの画像を作る
<a href=""> にデータURLとして拡大画像を入れる
new Loupe(); する

↓DataURL挿入後イメージ↓

HTML
1<a id="demo-1" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAA10lEQVR4nO3RsQ2AQAADsd9/MraCPg0VugJbygKXcwAAAAAAAAAAAAAA4Heuc+4/re79qg7kkFEHcsioAzlk1IEcMupADhl1IIeMOpBDRh3IIaMO5JBRB3LIqAM5ZNSBHDLqQA4ZdSCHjDqQQ0YdyCGjDuSQUQdyyKgDOWTUgRwy6kAOGXUgh4w6kENGHcghow7kkFEHcsioAzlk1IEcMupADhl1IIeMOpBDRh3IIaMO5JBRB3LIqAM5ZNSBHDLqQA4ZdSCHjDqQQwAAAAAAAAAAAAAA4GsPKBWqkXXeQC0AAAAASUVORK5CYII=">
2  <img src="small.jpg" />
3</a>

【toDataURL() メソッド - Canvasリファレンス - HTML5.JP】
http://www.html5.jp/canvas/ref/HTMLCanvasElement/toDataURL.html

【GitHub - redoPop/loupe: A lightweight image magnifier for modern browsers】
https://github.com/redoPop/loupe

投稿2016/04/29 02:06