Makes changes to Canvas Hype pro

Hello

I am using the Canvas hype pro template. I am trying to make minor changes but I am not really good in javascript.

This is the script used to set color :

$('.colorpicker').css('border-width', '0px')	
$(element).css({'border-width': '5px', 'border-color': 'white', 'border-style': 'solid'})
context.strokeStyle = element.style.backgroundColor;
context.fillStyle = element.style.backgroundColor;
$('.strokes').css({'background-color': context.strokeStyle })

I would like the color picked to have some transparency, like 50% transparency. Could anyone suggest me what to add or change in the script ?

I also would like to change the drawing shape from round to rectangle. This is the script used to select the shape :

$('.strokes').css('border-width', '0px')	
$(element).css({'border-width': '5px', 'border-color': 'white', 'border-style': 'solid'})
	
context.lineWidth = hypeDocument.getElementProperty(element, 'width')/10*6;

Any chance someone can help me adjust the script ?

What is that ?

Can you add a link to the thread you are pulling this code from and an example project file that you are using it in.

And any other relevant details…

This may make it easier for us to test and help you.

Hello Mark

I using the file available on hypedocks.com at this adress

http://www.hypedocks.com/downloads/drawing-canvas/

I tried to enclosed the file to this reply but it is too heavy

so when you say

Are you talking about the actual picker squares?

If so then you would do that in the Hype Properties for each element using the opacity property.

You also change these in Hype’s element properties. Or replace them ??

None of that needs to be done in JS.

If I have understood correctly then it would be worth you going over the Hype documentation.
If not can you be more clear in what you mean.

Cheers.

Hello Mark

For the color picker, I do not want to change the transparency of the square. I wish to change the transparency of the color when i draw. For example, if I pick yellow, and draw, I would like the yellow line drawn to be yellow but with 50% transparency.

It is the same for the drawing pen, Canvas offer various size of lines for drawing. I would like the line drawn to look more rectangular like if I am using a highlighter.

I tried to modify the file, but nothing work so I am assuming javascript might be the key.

Let me know if my explanation are clearer.

Thank a lot for your time.

Sincerely

Pierre

I see,

The first part. You need t convert the picked colour from rgb to rgba.

We can simply do this by replacing a couple of parts of the string that makes up the colour.

$('.colorpicker').css('border-width', '0px')	
$(element).css({'border-width': '5px', 'border-color': 'white', 'border-style': 'solid'})


 var alpahColor = (element.style.backgroundColor).replace(')', ', 0.5)').replace('rgb', 'rgba');
 
context.strokeStyle = alpahColor.toString();
context.fillStyle = alpahColor.toString()
$('.strokes').css({'background-color': element.style.backgroundColor})

Hello Mark

Thank a lot, it works like a charm :slight_smile:

What about the shape of the line ?

There was a comment in the code about omitting a few params to get a rect.

I spotted it after having a quick look and inserting a different canvase draw command for a rect and using the x,y, width,height already used. This worked to some extent got correct sized squares and but part of the redraw was putting out circles within the drawing.

   ctx.beginPath();
ctx.rect(x, y,width,height);

inserted as shown. ( only to see if it would work quickly )

var thisCoords = element.getBoundingClientRect();
 			var minusTop = thisCoords.top;
 			var minusLeft = thisCoords.left;
			var currDimension = context.lineWidth;
			var currRadius = currDimension/2;
            var pos = {
                  x: (event.clientX - minusLeft) - context.lineWidth/2,
                  y: (event.clientY - minusTop)  - context.lineWidth/2
            };

roundRect(context, pos.x, pos.y, currDimension, currDimension, currRadius, true, false) 
	
/**
	
 * outline with a 5 pixel border radius 
 * @param {CanvasRenderingContext2D} ctx
 * @param {Number} x The top left x coordinate
 * @param {Number} y The top left y coordinate 
 * @param {Number} width The width of the rectangle 
 * @param {Number} height The height of the rectangle
 * @param {Number} radius The corner radius. Defaults to 5;
 * @param {Boolean} fill Whether to fill the rectangle. Defaults to false.
 * @param {Boolean} stroke Whether to stroke the rectangle. Defaults to true.
 */
function roundRect(ctx, x, y, width, height, radius, fill, stroke) {
  if (typeof stroke == "undefined" ) {
    stroke = true;
  }
  if (typeof radius === "undefined") {
    radius = 5;
  }
  
  ctx.beginPath();
ctx.rect(x, y,width,height);

  /*
  ctx.beginPath();
 
  ctx.moveTo(x + radius, y);
  ctx.lineTo(x + width - radius, y);
  ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
  ctx.lineTo(x + width, y + height - radius);
  ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
  ctx.lineTo(x + radius, y + height);
  ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
  ctx.lineTo(x, y + radius);
  ctx.quadraticCurveTo(x, y, x + radius, y);
  ctx.closePath();
  */
   
  if (stroke) {
    ctx.stroke();
  }
  if (fill) {
    ctx.fill();
  }        
}


I then saw the comment and tried that.

It does now work really Large square which would make sense since the params we remove.
I suspect part of the issue with that is the comment is not complete.

paintDot()

  • Draws a rounded rectangle using the current state of the canvas.
  • If you omit the last three params, it will draw a rectangle

I did not have time to delve further.

maybe @h_classen can have a look…