Ionic canvas drawing problem

umeshionic1234 · February 13, 2018, 1:11pm

am making one application …in which task is editing on image…so I use canvas and showing image on canvas (with the help of camera ) and drawing on image…but now problem is before adding image …with help of drawing brush when i touch on canvas it draw on canvas …but i want to draw on image only after adding through camera…not before so any solution plesase

anna_liebt · February 13, 2018, 3:04pm

Hello,

maybe a boolean like isdrawready = true otherwise your function where you draw does nothing?

DrawOnCanvas(){
if(isdrawable !=true){
return;
}
draw
}

Best regards, Anna-liebt

umeshionic1234 · February 13, 2018, 3:28pm

@anna_liebt Thanks for reply but can you check my code please and tell me where to add this function
canvas-draw.ts file code -
import { Component, ViewChild, Renderer } from ‘@angular/core’;
import { Platform } from ‘ionic-angular’;
import { Camera, CameraOptions } from ‘@ionic-native/camera’;
import { IonicPage, NavController, NavParams } from ‘ionic-angular’;

@Component({
selector: ‘canvas-draw’,
templateUrl: ‘canvas-draw.html’
})
export class CanvasDraw {

@ViewChild('myCanvas') canvas: any;

canvasElement: any;
lastX: number;
lastY: number;
public photos : any;
base64Image:any;

currentColour: string = '#1abc9c';
availableColours: any;

brushSize: number = 10;

constructor(public platform: Platform, public renderer: Renderer,private camera : Camera,public navCtrl: NavController, public navParams: NavParams) {
    console.log('Hello CanvasDraw Component');

    this.availableColours = [
        '#1abc9c',
        '#3498db',
        '#9b59b6',
        '#e67e22',
        '#e74c3c'
    ];

}

ngAfterViewInit(){

    this.canvasElement = this.canvas.nativeElement;

    this.renderer.setElementAttribute(this.canvasElement, 'width', this.platform.width() + '');
    this.renderer.setElementAttribute(this.canvasElement, 'height', this.platform.height() + '');

}

changeColour(colour){
    this.currentColour = colour;
}

changeSize(size){
    this.brushSize = size;
}

handleStart(ev){

    this.lastX = ev.touches[0].pageX;
    this.lastY = ev.touches[0].pageY;
}

handleMove(ev){

    let ctx = this.canvasElement.getContext('2d');
    let currentX = ev.touches[0].pageX;
    let currentY = ev.touches[0].pageY;

    ctx.beginPath();
    ctx.lineJoin = "round";
    ctx.moveTo(this.lastX, this.lastY);
    ctx.lineTo(currentX, currentY);
    ctx.closePath();
    ctx.strokeStyle = this.currentColour;
    ctx.lineWidth = this.brushSize;
    ctx.stroke();      

    this.lastX = currentX;
    this.lastY = currentY;

}

clearCanvas(){
    let ctx = this.canvasElement.getContext('2d');
    ctx.clearRect(0, 0, this.canvasElement.width, this.canvasElement.height);  
}

// takePhoto() {
//   const options : CameraOptions = {
//     quality: 50, // picture quality
//     destinationType: this.camera.DestinationType.DATA_URL,
//     encodingType: this.camera.EncodingType.JPEG,
//     mediaType: this.camera.MediaType.PICTURE
//   }
//   this.camera.getPicture(options) .then((imageData) => {
//       this.base64Image = "data:image/jpeg;base64," + imageData;
//       this.photos.push(this.base64Image);
//       this.photos.reverse();
//     }, (err) => {
//       console.log(err);
//     });
// }

takePhoto() 
{

  
  var image = new Image();

  let ctx = this.canvasElement.getContext('2d');

  const options : CameraOptions = 
  {
    quality: 50, // picture quality
    destinationType: this.camera.DestinationType.DATA_URL,
    encodingType: this.camera.EncodingType.JPEG,
    mediaType: this.camera.MediaType.PICTURE
  }
  this.camera.getPicture(options) .then((imageData) => 
  {
  
      this.base64Image = "data:image/jpeg;base64," + imageData;
      //this.photos.push(this.base64Image);
      //this.photos.reverse();



      //canvas.push(this.base64Image);

      image.src=this.base64Image;

     // ctx.drawImage(image, 0, 0);

      ctx.drawImage(image, 0, 0, image.width,    image.height,     // source rectangle
          0, 0, this.canvasElement.width, this.canvasElement.height)

          //handleStart();

      /*image.onload = function() {
        this._CONTEXT.drawImage(image, 0, 0);
      };*/

      //this._CONTEXT.drawImage(image,0,0);

      /*this._CONTEXT.drawImage(image, 0, 0, image.width,    image.height,     // source rectangle
        0, 0, this._CANVAS.width, this._CANVAS.height);*/

    }, (err) => {
      console.log(err);
    });


}

}

canvas.html code

<button ion-button full (click)=“takePhoto()” >
Take Photo

SEND

I implement this code by following https://www.joshmorony.com/using-a-canvas-to-create-a-drawing-app-in-ionic-part-1/

umeshionic1234 · February 13, 2018, 3:33pm

canvas.html code :

<button *ngFor=“let colour of availableColours” icon-only ion-button (click)=“changeColour(colour)”>
<ion-icon [style.color]=“colour” name=“brush”>

<button ion-button full (click)=“takePhoto()” >
Take Photo

SEND

anna_liebt · February 13, 2018, 3:44pm

Hello,
in handleMove you are drawing, so you can compare there a boolean that indicates if you want draw or not.

In takePhoto() you can switch the boolean to true, after you had added the photo to canvas.

Somewhere else, maybe in clearCanvas you can switch the boolean to false.

@ViewChild('myCanvas') canvas: any;

canvasElement: any;
lastX: number;
lastY: number;
public photos : any;
base64Image:any;

currentColour: string = '#1abc9c';
availableColours: any;

brushSize: number = 10;
isreadytodraw = false;

takePhoto() 
{

  
  var image = new Image();

  let ctx = this.canvasElement.getContext('2d');

  const options : CameraOptions = 
  {
    quality: 50, // picture quality
    destinationType: this.camera.DestinationType.DATA_URL,
    encodingType: this.camera.EncodingType.JPEG,
    mediaType: this.camera.MediaType.PICTURE
  }
  this.camera.getPicture(options) .then((imageData) => 
  {
  
      this.base64Image = "data:image/jpeg;base64," + imageData;
      //this.photos.push(this.base64Image);
      //this.photos.reverse();



      //canvas.push(this.base64Image);

      image.src=this.base64Image;

     // ctx.drawImage(image, 0, 0);

      ctx.drawImage(image, 0, 0, image.width,    image.height,     // source rectangle
          0, 0, this.canvasElement.width, this.canvasElement.height)

          //handleStart();

      /*image.onload = function() {
        this._CONTEXT.drawImage(image, 0, 0);
      };*/

      //this._CONTEXT.drawImage(image,0,0);

      /*this._CONTEXT.drawImage(image, 0, 0, image.width,    image.height,     // source rectangle
        0, 0, this._CANVAS.width, this._CANVAS.height);*/

    }, (err) => {
      console.log(err);
    });

isreadytodraw= true;
}

handleMove(ev){

if(isreadytodraw!=true){
return;
}

    let ctx = this.canvasElement.getContext('2d');
    let currentX = ev.touches[0].pageX;
    let currentY = ev.touches[0].pageY;

    ctx.beginPath();
    ctx.lineJoin = "round";
    ctx.moveTo(this.lastX, this.lastY);
    ctx.lineTo(currentX, currentY);
    ctx.closePath();
    ctx.strokeStyle = this.currentColour;
    ctx.lineWidth = this.brushSize;
    ctx.stroke();      

    this.lastX = currentX;
    this.lastY = currentY;

}

clearCanvas(){

isreadytodraw= false;
    let ctx = this.canvasElement.getContext('2d');
    ctx.clearRect(0, 0, this.canvasElement.width, this.canvasElement.height);  
}

umeshionic1234 · February 15, 2018, 6:56am

hey @anna_liebt thank you for your reply but there is error in code …"cannot read property ‘getcontext’ of undefined " and camera is not opening to take image

anna_liebt · February 15, 2018, 11:38am

Hello,

the errror means that whatever from whatever.getcontext is a this time not available, maybe a livecycle error, maybe a typo, maybe a…

You use canvasElement.getContext(‘2d’), but I can’t see where canvasElement is set to a canvas, only defined as any.

Maybe you want use @ViewChild(‘myCanvas’) canvas: any;, but canvas is not canvasElement, maybe …

By the way. I don’t think variable named like a html tag is a good idea. But unfortunally I’m not really expierenced with js or ts or any other web stuffs related things to give advice what a ggod practice is.

Best regards, anna-liebt

umeshionic1234 · February 15, 2018, 11:47am

okay Thanks for reply

umeshionic1234 · February 15, 2018, 12:38pm

@anna_liebt when I add functionalitis like camera,drawing on canvas, in my ionic project which having android version 7…but when I run .apk file in kitkat version device and in android 4.4. and 5.2 …my application functionalities not work properly like…not opening camera in android 4.4 but opening in android 6.0 such problem of my app …please tell me any solution for how my app will work fine in all device ?

Topic		Replies	Views
Ionic canvas-draw component drawing problem on image ionic-v3	2	1917	July 19, 2021
Can somebody explain how you use canvas with ionic? ionic-v1	0	630	October 26, 2016
How to display image(taking with camera) on canvas (signature pad) ionic-v3	56	8983	July 19, 2021
Draw on HTML Canvas in Ionic App ionic-v1	0	1325	September 9, 2016
Problems to draw in ionic ionic-v3	2	1050	March 1, 2018

Ionic canvas drawing problem

Related topics