CODEWITHSUNDEEP
jqueryhtmlcanvas
itx
itx

Reputation: 1399

Edit text on canvas HTML5 with jQuery

I know canvas can't editing text from field.

I try to make this http://jsfiddle.net/0n60y65o/4/

$(document).ready(function () {
    var canvas = $('#cEditor')[0];
    var context = canvas.getContext('2d');
    var newTxt = 'Your text here';

    createTxt();

    $('input[data-selector="inputName"]').bind('change', function () {
        var newVal = $(this).val();
        changeTxt(newVal);
    });

    function createTxt() {
        context.translate(canvas.width / 2, canvas.height / 2);
        context.font = '18pt Calibri';
        context.textAlign = 'center';
        context.fillStyle = '#000';
        context.fillText(newTxt, 0, 0);
    }

    function changeTxt(newVal) {
        newTxt = newVal;
        context.save();
        context.fillText(newTxt, 0, 0);
        context.restore();
    };
});

but it can make new text on canvas not change a text on canvas.

I hope someone tell me workflow and component for build editor this site http://customerscanvas.com/demos/Editor.aspx?header=1-sided%20Business%20Card&design=BusinessCard1&downloadEnabled=true&backgroundButtonEnabled=true&rectEllipseButtonsEnabled=false (sorry I'm not spam, it's for example live site) On that site, you can change style/edit text, add a text, add a image etc.

Upvotes: 0

Views: 3429

Answers (1)

adeneo
adeneo

Reputation: 318182

You have to clear the canvas, which can be done be resetting the width, and redraw the text, so basically you could just do the same thing as when you're first creating it, everytime the text changes, like this : 

$(document).ready(function () {
    $('input[data-selector="inputName"]').on('input', createTxt).trigger('input');

    function createTxt() {
        var canvas = document.getElementById('cEditor');
        var context = canvas.getContext('2d');

        canvas.width = canvas.width;
        context.translate(canvas.width / 2, canvas.height / 2);
        context.font = '18pt Calibri';
        context.textAlign = 'center';
        context.fillStyle = '#000';
        context.fillText(this.value, 0, 0);
    }
});

FIDDLE

Upvotes: 1

Related Questions