Why are objects within the HTML canvas not being displayed when zoomed in

Question

Can someone explain why the green arc within the canvas is not being displayed.

Here is my progress so far : https://jsfiddle.net/hxsbLtwj/3/

Here is the code for the green arc

  context.beginPath();
  context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
  context.fillStyle = 'green';
  context.fill();
  context.lineWidth = 5;
  context.strokeStyle = '#003300';
  context.stroke();

What I want to achieve is to have the green arc to be displayed within the zoom window, just like what's happening in the above 'text' and 'image' section.

I'm using the library 'AnythingZoomer2' https://css-tricks.com/examples/AnythingZoomer/index.php

Answer 1

The issue is that you are not creating canvas for the small area, that's why its not working, here is a working example or a working snippet here:

 /* Demo for jQuery AnythingZoomer Plugin https://github.com/CSS-Tricks/AnythingZoomer */ $(function() { var canvas = document.getElementsByClassName('myCanvas')[0]; var context = canvas.getContext('2d'); var centerX = canvas.width / 2; var centerY = canvas.height / 2; var radius = 70; var background = new Image(); background.src = "https://www.yourpurebredpuppy.com/dogbreeds/photos2-G/german-shepherd-05.jpg"; // Make sure the image is loaded first otherwise nothing will draw. background.onload = function(){ context.drawImage(background,0,0); context.beginPath(); context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); context.fillStyle = 'green'; context.fill(); context.lineWidth = 5; context.strokeStyle = '#003300'; context.stroke(); } var canvas2 = document.getElementsByClassName('myCanvas')[1]; var background2 = new Image(); background2.src = "https://www.yourpurebredpuppy.com/dogbreeds/photos2-G/german-shepherd-05.jpg"; var context2 = canvas2.getContext('2d'); var centerX2 = canvas2.width / 2; var centerY2 = canvas2.height / 2; var radius2 = 70; background2.onload = function(){ context2.drawImage(background2,0,0); context2.beginPath(); context2.arc(centerX2, centerY2, radius2, 0, 2 * Math.PI, false); context2.fillStyle = 'green'; context2.fill(); context2.lineWidth = 5; context2.strokeStyle = '#003300'; context2.stroke(); } $("#zoom1").anythingZoomer({ // ***************** content areas ***************** // class of small content area; the element with this class // name must be inside of the wrapper smallArea: 'small', // class of large content area; this class must exist inside // of the wrapper. When the clone option is true, it will add // this automatically largeArea: 'large', // Make a clone of the small content area, use css to modify // the style; default is false; // set to true here to clone the small content clone: true, // ***************** appearance ***************** // Set to true to add the overlay style while hovering the // small content, false to disable overlay: false, // fade animation speed (in milliseconds) speed: 100, // How far outside the wrapped edges the mouse can go; // previously called "expansionSize" edge: 30, // adjust the horizontal position of the large content inside // the zoom window as desired offsetX: 0, // adjust the vertical position of the large content inside // the zoom window as desired offsetY: 0, // ***************** functionality ***************** // event that allows toggling between small and large // elements; default is double click ('dblclick') switchEvent: 'dblclick', // time to delay before revealing the zoom window. delay: 0, // ***************** edit mode ***************** // add x,y coordinates into zoom window to make it easier to // find coordinates edit: false, // ***************** callbacks ***************** // AnythingZoomer done initializing initialized: function(e, zoomer) {}, // zoom window visible zoom: function(e, zoomer) {}, // zoom window hidden unzoom: function(e, zoomer) {} }); $("#zoom2").anythingZoomer(); });

 <link rel="stylesheet" type="text/css" href="https://css-tricks.github.io/AnythingZoomer/css/anythingzoomer.css"> <p><strong>Text Demo</strong></p> <br> <div id="zoom2"> <div class="small"> <canvas class="myCanvas"></canvas> </div> <div class="large"> <canvas class="myCanvas"></canvas> </div> </div> <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> <script src="https://css-tricks.github.io/AnythingZoomer/js/jquery.anythingzoomer.js"></script>