CODEWITHSUNDEEP
javascripthtmlhtml5-canvas
Aizaz Athar
Aizaz Athar

Reputation: 71

How to make resizable Text on canvas using javascript

I'm pretty much new to canvas. What I'm trying to make is that I can write text in canvas using input and can be able to resize it by dragging it's corners. Also I should be able to drag text position within the canvas. Following is the screen shot of what I want! enter image description here

Upvotes: 1

Views: 1686

Answers (2)

sasensi
sasensi

Reputation: 4650

As @hirasawa-yui mentioned, you can use Paper.js to greatly facilitate the implementation of what you want in a canvas.

Here is a simplified sketch showing a possible implementation of dragging/resizing interactions.

// create item
var item = new PointText({
    content: 'Custom text content',
    point: view.center,
    justification: 'center',
    fontSize: 30,
    selected: true
});

// init variables so they can be shared by event handlers
var resizeVector;
var moving;

// on mouse down...
function onMouseDown(event) {
    // ...do a hit test on item bounds with a small tolerance for better UX
    var cornerHit = item.hitTest(event.point, {
        bounds: true,
        tolerance: 5
    });
    // if a hit is detected on one of the corners...
    if (cornerHit && ['top-left', 'top-right', 'bottom-left', 'bottom-right'].indexOf(cornerHit.name) >= 0) {
        // ...store current vector from item center to point
        resizeVector = event.point - item.bounds.center;
    // ...else if hit is detected inside item...
    } else if (item.hitTest(event.point, { fill: true })) {
        // ...store moving state
        moving = true;
    }
}

// on mouse drag...
function onMouseDrag(event) {
    // ...if a corner was previously hit...
    if (resizeVector) {
        // ...calculate new vector from item center to point
        var newVector = event.point - item.bounds.center;
        // scale item so current mouse position is corner position
        item.scale(newVector / resizeVector);
        // store vector for next event
        resizeVector = newVector;
    // ...if item fill was previously hit...
    } else {
        // ...move item
        item.position += event.delta;
    }
}

// on mouse up...
function onMouseUp(event) {
    // ... reset state
    resizeVector = null;
    moving = null;
}

// draw instructions
new PointText({
    content: 'Drag rectangle to move, drag corners to resize.',
    point: view.center + [0, -50],
    justification: 'center'
});

Upvotes: 1

Hirasawa Yui
Hirasawa Yui

Reputation: 1296

Canvas is raster, not vector. By simply drawing and resizing text you would expect it to get blurry or pixelated. And redrawing the whole canvas each time user moves the cursor while resizing will not result in the best performance. Consider using svg instead. In case you do need canvas and don't want to implement all the functions yourself, you can use the paperjs library.

http://paperjs.org/reference/pointtext/

Upvotes: 1

Related Questions