Ionic canvas drawing problem


#1

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


#2

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


#3

@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

<canvas #myCanvas (touchstart)=“handleStart($event)” (touchmove)=“handleMove($event)”>

SEND

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


#4

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

<canvas #myCanvas (touchstart)=“handleStart($event)” (touchmove)=“handleMove($event)”>

SEND

#5

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);  
}


#6

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


#7

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


#8

okay Thanks for reply


#9

@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 ?