title: How to draw Canvas in WebView?
body: <p>I'm making an app where people will be able to place circles in WebView. So, my 
  algorithm is:</p>
  
  <ol>
  <li>Detect long click</li>
  <li>Get finger coordinates on WebView</li>
  <li>Draw circle in Canvas</li>
  </ol>
  
  <p>So at first I was able to write a code that would draw a circle on <code>LongClick</code>, the only problem was that when I changed scale(zoomed), circle moved from it's place. With the help of karaokyo answer I have fixed this moving issue) with adding <code>scale</code> float <code>Canvas.drawCircle(x * scale, y * scale, 10, p)</code>, where <code>scale = getScale()</code>. 
  Unfortunately new problem appeared - when I make the circle it draws in wrong coordinates. This image shows what I mean:
  <a href="https://i.stack.imgur.com/Learx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Learx.png" alt="enter image description here"></a></p>
  
  <pre><code>public DrawWebView (Context context, AttributeSet attrs)
  {
      super (context, attrs);
      wv1 = (DrawWebView) findViewById(R.id.webView1);
      wv1.loadUrl("file://" + Environment.getExternalStorageDirectory() + "/Pictures/ScolDetectPics/boxes.jpg");
      wv1.getSettings().setBuiltInZoomControls(true);
      wv1.getSettings().setDisplayZoomControls(false);
      wv1.getSettings().setSupportZoom(true);
      wv1.getSettings().setUseWideViewPort(true);
      wv1.getSettings().setLoadWithOverviewMode(true); 
      wv1.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);
      mContext = context;
  
  
  
  
  
  public boolean onTouch(View v, MotionEvent event) {
  
      int action = event.getAction(); 
  
  
      switch (action) { 
      case MotionEvent.ACTION_DOWN:
          draw = true;
          this.invalidate();
          break;
      case MotionEvent.ACTION_MOVE:   
          this.invalidate();
          break;
  
      case MotionEvent.ACTION_UP: 
          this.invalidate();
          break;
      case MotionEvent.ACTION_CANCEL:
  
          break; 
  
      default: 
          break; 
      }
      return true;
  }
  
  
  @Override
  protected void onDraw(Canvas canvas) 
  {
  
      super.onDraw (canvas);
      text = MainActivity.text;
  
      zoomPos = MainActivity.zoomPos;
      Paint p = new Paint();
      p.setColor (Color.RED);
  
      if(initScale == 0){
          initScale = getScale();
      }
  
      float scale = getScale();
  
      float refScale = scale/initScale;
  
      if(MainActivity.drawConfirm){
      zoomPos = MainActivity.zoomPos;
      draw1 = true;
      }
      canvas.drawCircle(330 * refScale, 618 * refScale, 10, p);
      //text.setText(Float.toString(scale));
      text.setText(Float.toString(initScale));
      canvas.drawCircle(330, 618, 10, p);
      if(draw1){
      canvas.drawCircle(zoomPos.x * refScale, zoomPos.y * refScale, 10, p);
      }
  
  }
  </code></pre>
  
  <p>}</p>
  
  <p>Also if I double-tap multiple times circles(both) appear in wrong place, move to the right place when I click.</p>
  
  <p><a href="https://i.stack.imgur.com/KJH2M.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KJH2M.png" alt="enter image description here"></a></p>
  
  <p>If you know how to do this or know a good tutorial - it would be much appreciated.</p>
  
  <p>[Update for karaokyo's answer]</p>
  
  <p>I've copied your code, but circle's still in the wrong place, in fact, <code>initialScale</code> value is 2.0. It is clearly seen on this image.
  1. Circle that has moving issue, but in correct coordinates.
  2. Circle without moving issue, coordinates multiplied by <code>scale = getScale</code>.
  3. Circle without moving issue, coordinates multiplied by <code>scale/initScale</code></p>
  
  <p><a href="https://i.stack.imgur.com/yWFKC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yWFKC.png" alt="enter image description here"></a></p>